I'm using the following code to allow for an accordion effect on a series of table rows.
$('.accordian-body').on('show.bs.collapse', function () {
$(this).closest("table")
.find(".collapse.in")
.not(this)
.collapse('toggle')
});
Inside the collapsed rows I also have a series of checkboxes, to allow for options to be selected:
<div style="float:right;margin-top:-5px;" class="checkbox check-primary checkbox-circle">
<input id="checkbox1" type="checkbox" checked="checked" value="1">
<label for="checkbox1"></label>
</div>
These checkboxes cannot be checked or unchecked, even if not disabled, although the mouse pointer will chance to indicate a clickable element is there.
How can I re-enable the checkboxes?
Thanks!
Related
I understand how to toggle the status of all check-boxes to checked or not-checked by a single click, either by a check-box or a link. That is the easy part.
But I also have several check-boxes that I do not want to toggle on or off by a single click, that are not part of the group that should be affected. These check-boxes need to be protected.
Below is an example. I can click the bottom checkbox to toggle, but it should only affect Item 1 through Item 3 check-boxes. When I click the bottom checkbox, it should not toggle the first two check-boxes that should be protected.
Thanks...
$(function() {
$('#toggle-all').click(function(event) {
var selected = this.checked;
$(':checkbox').each(function() {
this.checked = selected;
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- These next two checkboxes should not be part of the checkboxes to be all toggled on or off -->
<input type='checkbox' name='notAssociated1'>This checkbox should be protected from ability to toggle all below<br>
<input type='checkbox' name='notAssociated2'>This checkbox should also be protected from ability to toggle all below<br><br>
<!-- The checkboxes below should be affected by clicking on the checkbox to toggle all on or off -->
<input type="checkbox" name="CB1" id="CB1" />Item 1<br>
<input type="checkbox" name="CB2" id="CB2" />Item 2<br>
<input type="checkbox" name="CB3" id="CB3" />Item 3<br>
<!-- select all boxes -->
<br><input type="checkbox" name="toggle-all" id="toggle-all" />Toggle Item 1 thru Item 3 but not the top two checkboxes
With a slight modification to your code, you can enable selecting only the checkbox inputs you want. There are multiple ways to achieve this, but I chose to surround the targeted check boxes with a fieldset element (you can use a div element or other block-level element if you wish) and use .siblings() to select only these check boxes. See the following code snippet as an example.
$(function() {
$('#toggle-all').click(function(event) {
var selected = this.checked;
$(this).siblings(":checkbox").each(function() {
this.checked = selected;
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- These next two checkboxes should not be part of the checkboxes to be all toggled on or off -->
<fieldset>
<input type='checkbox' name='notAssociated1'>This checkbox should be protected from ability to toggle all below<br>
<input type='checkbox' name='notAssociated2'>This checkbox should also be protected from ability to toggle all below<br><br>
</fieldset>
<!-- The checkboxes below should be affected by clicking on the checkbox to toggle all on or off -->
<fieldset>
<input type="checkbox" name="CB1" id="CB1" />Item 1<br>
<input type="checkbox" name="CB2" id="CB2" />Item 2<br>
<input type="checkbox" name="CB3" id="CB3" />Item 3<br>
<!-- select all boxes -->
<br><input type="checkbox" name="toggle-all" id="toggle-all" />Toggle Item 1 thru Item 3 but not the top two checkboxes
</fieldset>
If you would prefer to keep the original layout, you can use other selectors to target the selectors you want. In your case, you can select with $("[id^=CB]") or setting classes to each of the check box elements and selecting with $(".selectAllCB") or whatever class name you would like.
if you're using jQuery selectors you can just give checkboxes groupings through id, or class.
eg. using:
$('.class-group')...
(bit of a noob myself mind!)
So I have a dynamically listed set of elements, each structured as follows:
<div class="under-item-description">
<span class="under-compare-price">100</span><span class="under-price">50</span>
<span class="under-compare-price-2">200</span><span class="under-price-2">100</span>
<div class="under-quantity">
<label class="under-quantity-button">
<input type="radio" checked="checked" name="quantity-1" class="under-quantity-radio" value="1"/>
</label>
<label class="under-quantity-button">
<input type="radio" name="quantity-2" class="under-quantity-radio" value="2"/>
</label>
</div>
</div>
The amount of times the .under-item-description div is shown on the page can change. Currently, it shows four times.
What I am trying to do is when a user clicks on the first checkbox (name="quantity-1") in any given .under-item-description div, that div's .under-compare-price and .under-price shows, while .under-compare-price-2 and .under-price-2 are hidden.
If the second checkbox (name="quantity-2") is clicked, then .under-compare-price-2 and .under-price-2 are shown while .under-compare-price and .under-price are hidden, only in that .under-item-description div.
Here's my JS:
$('.under-quantity-button').click(function(){
$('.under-quantity-radio').each(function(){
if($(this).is(':checked')){
$('.under-compare-price:eq('+$(this).parents('.under-item-description').index()+'), .under-price:eq('+$(this).parents('.under-item-description').index()+')').show();
$('.under-compare-price-2:eq('+$(this).parents('.under-item-description').index()+'), .under-price-2:eq('+$(this).parents('.under-item-description').index()+')').show();
}
});
});
However, it doesn't seem to function as I want. Regardless of which second checkbox is clicked, I have the prices appear on the 1st and 3rd elements. And it doesn't switch back when the first checkbox is clicked anywhere. Any help?
Surround each selection of radio buttons in a
<fieldset></fieldset>
This will allow them to work independently, then use jQuery closest() to select the elements to hide.
https://api.jquery.com/closest/
I'm trying to learn how to use jquery to show/hide elements dependent on values. i'm not sure if .show / .hide is the right choice so any help will be appreciated...
Here is my example on jsfiddle where I have 2 radio buttons and 2 divs.
I want Jquery to show a single div by the dependency of the checked radio button, so it will show only the one that is checked.
HTML:
<input type="radio" name="one" value="01" checked> Male<br>
<input type="radio" name="two" value="02"> Female<br>
<div class="showhide">
show me when 01 is checked.
</div>
<div class="showhide">
show me when 02 is checked.
</div>
JQuery (trying to understand what to do here):
$("div.showhide").hide();
$("div.showhide").show();
// or maybe with:
$("div.showthis").toggle(this.checked);
Using data-* attributes comes in handy in such practices. Rember that the radios name attributes must be the same that one and only one checkbox can be checked at any given time. And, there is no p tag in your code, at least in the example provided, so why bother prefixing the selector with it?
The following example makes use of data-section attribute which has the selector for the element that must be shown when the checkbox is checked. It is worth mentioning that this is code is dynamic and does not require changing the code when adding more inputs with divs.
$(function() {
// listen for changes
$('input[type="radio"]').on('change', function(){
// get checked one
var $target = $('input[type="radio"]:checked');
// hide all divs with .showhide class
$(".showhide").hide();
// show div that corresponds to selected radio.
$( $target.attr('data-section') ).show();
// trigger the change on page load
}).trigger('change');
});
.showhide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="radio" name="one" data-section="#div-1" value="01" checked>Male<br>
<input type="radio" name="one" data-section="#div-2" value="02">Female<br>
<div id="div-1" class="showhide">
show me when 01 is checked.
</div>
<div id="div-2" class="showhide">
show me when 02 is checked.
</div>
i have few tabs and each tab has same radio button groups like this
see case#1 has radio buttons name="managerid" and with class="managerid
<label>
<input type="radio" name="managerid" class="managerid managerid_8" data-radio="iradio_square-grey" value="8">
Spam Dead
</label>
<label>
<input type="radio" name="managerid" class="managerid managerid_9" data-radio="iradio_square-grey" value="9">
Stewart Stephenson
</label>
these are dynamically generated tabs and radio buttons
now i want to set radio button checked in each tabs with the value
this is how im doing
$.each($("#tab_"+r.id).find(".managerid"),function(i,v){
if(v.value === r.managerid){
v.checked = true;
}
});
i know the id of the tab so i find() the managerid and set them checked if the value matches
the problem is that it sets radio checked on the last tab only
how do i set radios checked on each tab with different values
I would suggest you to assign different style class to radio button controls and that is a better possible way to select/deselect across multiple tabs
I have two check boxes on a page, with one checked by default. I want to use jQuery to trigger a custom event when either of the check boxes is clicked. However, the problem is I want to get the checked value before the click event, but I keep getting checked as true.
My HTML looks like this:
<div class="clearfix controls">
<label class="radio inline" for="yes">
<input type="radio" name="recycle" value="1" id="yes" data-price-increase="29">
Yes
</label>
<label class="radio inline" for="no">
<input type="radio" name="recycle" value="0" id="no" checked="checked" data-price-decrease="29">
No
</label>
</div>
And my JavaScript looks like this:
$('[data-price-increase]').on('click', function(e) {
$('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});
$('[data-price-decrease]').on('click', function(e) {
$('body').trigger('price.decrease', [ $(this).data('price-decrease') ]);
});
But the click handlers get fired multiple times if I continually click a radio button, even if it’s already checked.
The radio buttons add or remove an additional charge respectively, so continually clicking the “Yes” radio button continually adds the charge to the price, which is undesired. If “Yes” is already checked then I don’t want the value adding again.
I think you look for change event:
$('[data-price-increase]').on('change', function(e) {
console.log('changed');
$('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});
$('[data-price-decrease]').on('change', function(e) {
console.log('changed');
$('body').trigger('price.decrease', [ $(this).data('price-decrease') ]);
});
So action is only triggered in case check is changed, not on each click.
ask the target if it´s checked
$('[data-price-increase]').on('click', function(e) {
if(!jQuery(event.target).is(":checked"))
$('body').trigger('price.increase', [ $(this).data('price-increase') ]);
});