Rails | 2 checkbox in dom not clickable - javascript

I have a form in my page and there I have checkboxes.
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">
<label for="tour">Tour</label>
</div>
I use this checkbox in both on the page and the bootstrap modal in small devices.
<div class='col-sm-5 col-md-4 col-lg-3 hidden-xs'>
<%= render 'search_filters' %>
</div>
..
<div class="modal-content modal-main-index">
<%= render 'search_filters' %>
</div>
..
Ofcourse because of this, I have 2 checkboxes with the same id. So one of them can not be clicked. What is the best way to solve this. (I do not want to fill modal on button click with js return)

Ofcourse because of this, I have 2 checkboxes with the same id. So one
of them can not be clicked. What is the best way to solve this.
Use class instead of id
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" class="tour" value="Tour">
<label for="tour">Tour</label>
</div>

On the html label tag
Tip: A label can be bound to an element either by using the "for" attribute, or by placing the element inside the element.
Thus, if you have an html page like this
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
</body>
</html>
both of those check boxes are selectable by clicking on the text. Whereas
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
</body>
</html>
will only ever toggle one of them (the top one in my case).

Related

How can I loop through common fieldsets in a single form in thymeleaf/html

I have a form which contains multiple virtual fieldsets that user can add as many as needed.
I'm trying to disable the fieldset based on a condition. Currently I'm disabling the fieldset using Jquery. The following is the code in js
if(condition){
$(#fieldset_id).prop("disabled",true);
}
With the above code, only the first fieldset is being disabled. The following fieldsets which are being added by the user are not being disabled. Is there any way i can iterate through the fieldsets using thymeleaf/jquery
Following is my html
<fieldset id="fieldset_id">
<div>
<label class=""> Field 1</label>
<div class="">
<input type="text" class=""
th:field="*{array[__${Stat.index}__].name}"
</div>
</div>
<div>
<label class=""> Field 2</label>
<div class="">
<input type="text" class=""
th:field="*{array[__${Stat.index}__].id}"
</div>
</div>
<div>
<label class=""> Field 3</label>
<div class="">
<input type="text" class=""
th:field="*{array[__${Stat.index}__].email}"
</div>
</div>
<div>
<label class=""> Field 4</label>
<div class="">
<input type="text" class=""
th:field="*{array[__${Stat.index}__].address}"
</div>
</div>
</fieldset>
The above code is common for multiple fieldsets that the user selects.
the selector $('#fieldset_id') will only ever select the first element with that ID because IDs are supposed to be unique. You can instead add a common class shared by each fieldset and select that, for example $('.fieldset_class'). if you modify your script like so:
if(condition){
$('.fieldset_class').prop("disabled",true);
}
then all elements with the class fieldset_class should be disabled

CSS not selector not working [duplicate]

This question already has answers here:
Why doesn't this CSS :not() declaration filter down?
(3 answers)
Closed 6 years ago.
I'm trying to select all inputs except the inputs inside some div.class. I do not know why it does not work correctly. My structure looks something like below. And why selector :not not work. And what can I do to exclude all inputs from the "exclude" div. Because i want only select inputs: i1,i2.
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
$('input').not('.exclude *')
or
$('input:not(.exclude *)')
These will grab all inputs which are not descendants of elements with the exclude class. You can get more specific on which inputs (maybe only the ones under a certain div or class) but this should get you the exclusion you're looking for.
You can see a working example here
In your HTML structure:
<div id="tab2" class="exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
each <input> is inside at least one <div> that does not have the class "exclude". Therefore your selector is working but it's not getting the result you want.
Instead, qualify the inputs selected the simple way:
console.log($("div input:not(.exclude *)").length);)
That selector will first select all of the <input> elements (well the ones inside <div> elements), but then exclude all of <input> elements that have an element with class "exclude" somewhere above them in the DOM.
If the original qualifier of being inside some <div> isn't really important, then all you need is "input:not(.exclude *)".
I marked inside your HTML the div that is not with the exclude class, and this is why you got 4 inputs on your console.log($("div:not(.exclude) input").length);
You can filter out the inputs that have parents with the exclude class:
console.log($("div.exclude input").length);
console.log($("div:not(.exclude) input").length);
console.log($("div input").length);
console.log($("input").filter(function() { return $(this).parents('.exclude').length > 0}).length);
$("input").filter(function() { return $(this).parents('.exclude').length > 0}).css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="exclude">
<div>
<div> <!-- This div is not with the class explude -->
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Take this:
console.log($("div.table.exclude input").length);
console.log($("div.table:not(.exclude) input").length);
console.log($("div input").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="tab1" class="table">
<div>
<div>
<input id="i1"/>
</div>
<input id="i2" />
</div>
</div>
<div id="tab2" class="table exclude">
<div>
<div>
<input id="i3" />
</div>
<input id="i4" />
</div>
</div>
</div>
Problem: there are inner divs which does not have the class and they satisfy the selector too.
Solution: Add another class to the divs which you want to be part of your selector and then use this new class too .. Like
<div id="tab1" class="tabs"> And
<div id="tab2" class="tabs exclude">
And then change script to
$("div.tabs:not(.exclude) input")

Toggle element on checkbox checked

I'm using Fuelux Checkbox component and I'm trying to toggle some DIV based on checkbox checked. I'm doing as follow:
$(document).ready(function(){
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").toggle(!this.checked);
$("#rifSucursal").toggle(this.checked);
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").toggle(!this.checked);
});
});
But is not working since #rifEmpresa is always show no matter what checkbox is checked or not. Te right way should be:
Check the first visible checkbox "Click me"
Hide #rifEmpresa DIV and show #rifSucursal right now that is show but the first is not hide
Toggle #rifEmpresa on RIF? checkbox checked
This is the related HTML code:
<form enctype="multipart/form-data" id="registroEmpresa" role="form" class="form-horizontal" method="POST">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div id="chkSucursal" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>Check me</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="sucursal" name="sucursal" value="1" class="sr-only">
</label>
</div>
</div>
</div>
<div style="display: none;" id="rifSucursal" class="form-group">
<div class="row">
<label class="col-sm-4 control-label">Find company<span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Show</div>
</div>
<div class="row">
<div id="chkRif" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>RIF?</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="chkRif" name="chkRif" value="1" class="sr-only"> <span class="checkbox-label">(check me to show "Some Form Element to HIDE")</span>
</label>
</div>
</div>
</div>
</div>
<div id="rifEmpresa" class="form-group has-feedback">
<label class="col-xs-4 control-label">RIF <span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Hide</div>
</div>
</div>
</div>
</form>
Can any give me some help and tell me what I'm doing wrong and how to fix my code? Here is a simple Fiddle for testing purposes
try this
http://jsfiddle.net/31roa5hz/2/
$(document).ready(function(){
$('html').addClass('fuelux');
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").hide('slow');
$("#rifSucursal").show('slow');
});
$('#chkSucursal').on('unchecked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").show('slow');
$("#rifSucursal").hide('slow');
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").show('slow');
});
$('#chkRif').on('unchecked.fu.checkbox', function () {
$("#rifEmpresa").hide('slow');
});
});
I think the control you're using doesn't have any property as checked, i tried to know if that element is checked or not using .is(':checked') it returns undefined. so i think the updated code is better for you as the UI control you're using has its own custom events which can be captured.
You should be able to do this:
$('input').on('change', checkboxChanged);
Like a normal checkbox. If you can't, it's a bug and you may want to try checking out/bower install #master, since we have been bugfixing the checkbox control over the past two weeks.
I do know that the checked attribute was not getting set in Fuel UX 3.4.0.

Show/hide multiple Divs with checkbox without using ID's only class names

Hi I needed assistance with having the “show/hide div” below show and hide when you click on either of the checkboxes in a section. I am planning on having multiple sections and the number is unknown, so it will not be possible to use ID's. So I was looking for a generic way if a checkbox in one region is clicked the “show/hide” only shows up in that region. I know you can probably achieve this by writing individual code and assigning ID’s for each section, but is there a way to make it function like I am visioning to avoid having to constantly update of the code? Is it possible to just target the closest div or next to element to achieve this when the checkbox is checked/unchecked or call css classes?
Here is my HTML
<!--section 1 -->
section 1
<div class="showHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 2
<!--section 2 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 3
<!--section 3 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
section 4
<!--section 4 -->
<div class="ShowHideDiv">SHOW/HIDE THIS DIV</div>
<div class="custom-input">
<div class="checkbox">
<input class="" id="" name="" type="checkbox"><label class="" for="">E-mail</label>
<input class="" id="" name="" type="checkbox"><label class="" for="">Print</label>
</div>
</div>
Once you fix the invalid html (you need to add a closing </div> for <div class="custom-input">), you could use
$(this).closest('.custom-input').prev('.ShowHideDiv') //where $(this) is the checkbox
Refer this fiddle for an example (based on the comments) that hides the <div> if none of the checkboxes are checked, and displays the <div> if one or both the checkboxes are checked
I would do it like this:
$('.checkbox').on('click', function(){
$(this).closest('.custom-input').prev('.showHideDiv').toggle();
});
Just make sure your markup is closed properly and all your showHideDiv classes are exactly the same (i.e. right now some start with lowercase and some start with uppercase)
updated
http://jsfiddle.net/EEj29/

Changing classes on multiple divs when selecting specific radio buttons

Hey everyone I got a javascript problem I can't seem to find a specific solution for on the web. What I want to be able to do is select one of the radio buttons and have that change the class of #home-right to either .rackmount or .shipping and add the class of .displaynone to the type of dimensions I don't want shown.
<div id="home-right" class="rackmount">
<h4 class="helvneuebcn">Case Finder</h4>
<div class="cta-options">
<input type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
<input type="radio" value="Rackmount Enclosures" name=""> Rackmount Enclosures<br/>
</div>
<div class="shipping-dimensions displaynone">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">H x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">W x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">L</span></div>
</div>
<div class="rackmount-dimensions">
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">U Height x </span></div>
<div class="dimensions"><input type="text" class="size"><span class="helvneuemd">Rack Depth</span></div>
</div>
<div class="clear"></div>
<input type="button" value="Submit" class="findcase">
</div>
Use a onClick handler on your radio buttons to do your stuff. Example:
<input onCLick="..." type="radio" value="Shipping and Storage" name="" checked> Shipping and Storage<br/>
Also use jQuery if you ain't already - it will save you some time and its very easy to do this kind of functionality.

Categories