当另一个字段中的值为0时，如何禁用复选框？

时间：2016-09-10 12:27:17

标签： javascript jquery

首先，这是一个jsFiddle：https://jsfiddle.net/1wL1t21s/

我有许多复选框（可能有1个，或者可能有10个），用户可以使用+或-选择浇头和数量。现在，他们必须增加数量，并选择一个复选框来启用它。

我的目标是，当数量为hidden时，复选框为checked，1 or more;如果数量为unchecked则为0。请注意，可以使用+或-以及键盘更改数量。

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

现在，我有这样的增量选项：

$( 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 );
   });

但是这不会检查或取消选中特定的复选框。我该怎么办？非常感谢任何帮助：）

3 个答案:

答案 0 :(得分：1)

您需要在两个点击功能中添加两行代码。

首先，您需要找到该特定项目的复选框，然后选中/取消选中，具体取决于数量。

   var checkBox = $(this).parents('.top10').find('input[type=checkbox].sub_item_name');
   checkBox.prop('checked', true);

现在，当我们点击加号/减号按钮时，我们会找到父母并获取输入类型复选框，这样一旦我们得到特定元素，那么取决于我们可以检查/取消选中的数量

checkBox.prop('checked', true);   // when qty > 0
checkBox.prop('checked', false);  // when qty == 0

通过这个你可以达到你的要求。

以下内容将完美运作 

 $( 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);
   } 

  });

希望这会有所帮助。谢谢！

答案 1 :(得分：1)

试试这个：

$(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代码：

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用 .closest（'。row.top10'）来获取父行和

$(document).on('input', 'input.numeric_only.addon_qty',

测试输入值。

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

相关问题
最新问题