How do I disable a checkbox when the value in another field is 0?
Question
First of all, here is a jsFiddle: https://jsfiddle.net/1wL1t21s/
I have a number of checkboxes (there may be 1, or there may be 10), where a user can select toppings and the quantity with a + or a - . Right now, they have to increase the quantity and also select a checkbox to enable it.
My goal is to have it so that the checkbox is hidden but checked when the quantity is 1 or more and unchecked when the quantity is 0 . Note that the quantity can be changed with the + or - and also with the keyboard.
<input value="29|5|Pepperoni|" data-id="9" data-option="" rel="multiple"
class="sub_item_name sub_item_name_9"
type="checkbox" name="sub_item[9][0]" id="sub_item_9_0">
<input class="numeric_only left addon_qty" maxlength="5"
type="text" value="0" name="addon_qty[9][0]" id="addon_qty_9_0">
Right now, I have the increment options like this:
$( document ).on( "click", ".qty-addon-plus", function() {
var parent=$(this).parent().parent();
var child=parent.find(".addon_qty");
var qty=parseFloat(child.val())+1;
if (isNaN(qty)){
qty=1;
}
child.val( qty );
});
$( document ).on( "click", ".qty-addon-minus", function() {
var parent=$(this).parent().parent();
var child=parent.find(".addon_qty");
var qty=parseFloat(child.val())-1;
if (qty<0){
qty=0;
}
child.val( qty );
});
But this doesn't check or uncheck the specific checkbox. How would I do that? Any help is greatly appreciated :)
3 answers
solution1
1 ACCPTED 2016-09-10 13:16:41
Just you need to add two lines of code in both of your click functions.
First you need to find the checkbox of that particular item and then checked/unchecked depends on the quantity.
var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
checkBox.prop('checked', true);
Now, when we click on the plus/minus button we are finding parents of the and getting the input type checkbox so that once we get the particular element then depends on quantity we can do check/uncheck
checkBox.prop('checked', true); // when qty > 0
checkBox.prop('checked', false); // when qty == 0
By this you can achieve your requirement.
The below will work perfectly
$( document ).on( "click", ".qty-addon-plus", function() {
var parent=$(this).parent().parent();
var child=parent.find(".addon_qty");
var qty=parseFloat(child.val())+1;
if (isNaN(qty)){
qty=1;
}
child.val( qty );
var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
checkBox.prop('checked', true);
});
$( document ).on( "click", ".qty-addon-minus", function() {
var parent=$(this).parent().parent();
var child=parent.find(".addon_qty");
var qty=parseFloat(child.val())-1;
if (qty<0){
qty=0;
}
child.val( qty );
var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
if (qty == 0) {
checkBox.prop('checked', false);
}
});
Hope this helps. Thanks !
solution2
1 2016-09-10 13:36:38
Try this :
$(document).ready(function(){
$(".qty-addon-minus,.qty-addon-plus").on("click",function(e){
func(e);
})
$(".addon_qty").on("input",function(e){
func2(e);
})
function func(e) {
$myInput = $(e.target).parents(".top10").find(".addon_qty");
$check = $(e.target).parents(".top10").find("input[type=checkbox]");
if($(e.target).hasClass("qty-addon-minus"))
$myInput.val(parseFloat($myInput.val()) - 1);
else
$myInput.val(parseFloat($myInput.val()) + 1);
$check.prop("checked",parseFloat($myInput.val()) > 0);
}
function func2(e) {
$myInput = $(e.target).parents(".top10").find(".addon_qty");
$check = $(e.target).parents(".top10").find("input[type=checkbox]");
$check.prop("checked",parseFloat($myInput.val()) > 0);
}
})
Fina code :
<!DOCTYPE html> <html lang="en"> <head> <style> body{ margin:20px; } .section-label{ margin-bottom:40px; } .green-button { /* background: #26d469; */ background: #00b279; border: 0px solid #00b279; color: #fff; padding: 5px 8px; } .row{ margin-bottom:10px; } </style> </head> <body> <div class="row top10"> <div class="col-md-5 col-xs-5 border into-row"> <input value="29|5|Pepperoni|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9" type="checkbox" name="sub_item[9][0]" id="sub_item_9_0"> Pepperoni</div> <!--col--> <div class="col-md-4 col-xs-4 border into-row "> <div class="row quantity-wrap-small"> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-minus">-</a> </div> <div class="col-md-5 col-xs-5 border"> <input class="numeric_only left addon_qty" maxlength="5" type="number" value="0" name="addon_qty[9][0]" id="addon_qty_9_0"> </div> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-plus">+</a> </div> </div> </div> <div class="col-md-3 col-xs-3 border text-right into-row"> <span class="hide-food-price"> <small>$</small>5</span> </div> <!--col--> </div> <!--row--> <div class="row top10"> <div class="col-md-5 col-xs-5 border into-row"> <input value="30|2|Ham|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9" type="checkbox" name="sub_item[9][1]" id="sub_item_9_1"> Ham</div> <!--col--> <div class="col-md-4 col-xs-4 border into-row "> <div class="row quantity-wrap-small"> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-minus">-</a> </div> <div class="col-md-5 col-xs-5 border"> <input class="numeric_only left addon_qty" maxlength="5" type="number" value="0" name="addon_qty[9][1]" id="addon_qty_9_1"> </div> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-plus">+</a> </div> </div> </div> <!--col--> <div class="col-md-3 col-xs-3 border text-right into-row"> <span class="hide-food-price"> <small>$</small>2</span> </div> <!--col--> </div> <!--row--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(document).ready(function(){ $(".qty-addon-minus,.qty-addon-plus").on("click",function(e){ func(e); }) $(".addon_qty").on("input",function(e){ func2(e); }) function func(e) { $myInput = $(e.target).parents(".top10").find(".addon_qty"); $check = $(e.target).parents(".top10").find("input[type=checkbox]"); if($(e.target).hasClass("qty-addon-minus")) $myInput.val(parseFloat($myInput.val()) - 1); else $myInput.val(parseFloat($myInput.val()) + 1); $check.prop("checked",parseFloat($myInput.val()) > 0); } function func2(e) { $myInput = $(e.target).parents(".top10").find(".addon_qty"); $check = $(e.target).parents(".top10").find("input[type=checkbox]"); $check.prop("checked",parseFloat($myInput.val()) > 0); } }) </script> </body> </html>
solution3
0 2016-09-10 12:36:12
You may use .closest('.row.top10') to get the parent row and
$(document).on('input', 'input.numeric_only.addon_qty',
to test the input values.
$( document ).on( "click", ".qty-addon-plus", function() { var parent=$(this).parent().parent(); var child=parent.find(".addon_qty"); var qty=parseFloat(child.val())+1; if (isNaN(qty)){ qty=1; } child.val( qty ); $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', true); }); $( document ).on( "click", ".qty-addon-minus", function() { var parent=$(this).parent().parent(); var child=parent.find(".addon_qty"); var qty=parseFloat(child.val())-1; if (qty<0){ qty=0; } child.val( qty ); if (qty <= 0) { $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', false); } }); $(document).on('input', 'input.numeric_only.addon_qty', function(e) { $(this).closest('.row.top10').find('input.sub_item_name.sub_item_name_9').prop('checked', this.value != '0'); });
body{ margin:20px; } .section-label{ margin-bottom:40px; } .green-button { /* background: #26d469; */ background: #00b279; border: 0px solid #00b279; color: #fff; padding: 5px 8px; } .row{ margin-bottom:10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="row top10"> <div class="col-md-5 col-xs-5 border into-row"> <input value="29|5|Pepperoni|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9" type="checkbox" name="sub_item[9][0]" id="sub_item_9_0"> Pepperoni</div> <!--col--> <div class="col-md-4 col-xs-4 border into-row "> <div class="row quantity-wrap-small"> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-minus">-</a> </div> <div class="col-md-5 col-xs-5 border"> <input class="numeric_only left addon_qty" maxlength="5" type="text" value="0" name="addon_qty[9][0]" id="addon_qty_9_0"> </div> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-plus">+</a> </div> </div> </div> <!--col--> <div class="col-md-3 col-xs-3 border text-right into-row"> <span class="hide-food-price"> <small>$</small>5</span> </div> <!--col--> </div> <!--row--> <div class="row top10"> <div class="col-md-5 col-xs-5 border into-row"> <input value="30|2|Ham|" data-id="9" data-option="" rel="multiple" class="sub_item_name sub_item_name_9" type="checkbox" name="sub_item[9][1]" id="sub_item_9_1"> Ham</div> <!--col--> <div class="col-md-4 col-xs-4 border into-row "> <div class="row quantity-wrap-small"> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-minus">-</a> </div> <div class="col-md-5 col-xs-5 border"> <input class="numeric_only left addon_qty" maxlength="5" type="text" value="0" name="addon_qty[9][1]" id="addon_qty_9_1"> </div> <div class="col-md-3 col-xs-3 border "> <a href="javascript:;" class="green-button inline qty-addon-plus">+</a> </div> </div> </div> <!--col--> <div class="col-md-3 col-xs-3 border text-right into-row"> <span class="hide-food-price"> <small>$</small>2</span> </div> <!--col--> </div> <!--row-->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I enable/disable checkboxes when another checkbox is selected?
How do I disable a checkbox when another checkbox is ticked & re-enable when unticked?
How do i checked another checkbox when i checked a checkbox(same class) and insert value into a textbox
How do i disable a submit button when checkbox is uncheck?
How do I disable an input when checkbox is clicked in PHP?
How do I disable input field when certain select list value is picked
How do I use jQuery to change a field when another field value has changed
How do I disable textarea on checkbox click?
how can i get sum of checkbox value and textbox value in another textbox when checkbox is checked or if checkbox unchecked remove the value
how do i output a checkbox details when a value is in use
Related Tags