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 :)



Answers

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>

By : ehsan


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 !



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-->

By : gaetanoM


This video can help you solving your question :)
By: admin