當在列表項中選中複選框時，只啓用該列表項中的文本框 - 按類Jquery

Question

我有一個項目列表，我需要做的是能夠檢查該列表項中的複選框，然後選中複選框該列表項變爲啓用狀態。這是我迄今爲止所做的一個JSFiddle。這將在頁面上啓用具有該類名稱的所有複選框。因爲這是一個JS文件，所以這些列表項是在一個kendo模板中生成的，所以我需要帶有類名的文本框。

謝謝

<ul id="productsFoundList" data-role="listview" data-style="inset" class="km-list" data-bind="source:foundProducts" data-template="productsFound-listview-filtering-template"> 
<li> 
    <label>code - desc 
     <input type="checkbox" name="eventActionToBeTaken" class="productsUl" /> 
     <div style="position: relative; padding-top:18px; padding-bottom:15px"> 
      <div style="margin-left:80px"> 
       <label style="color:grey">Qty</label> 
       <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/> 
       <label style="color:grey">Price</label> 
       <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/> 
       <label style="color:grey">Discount(%)</label> 
       <input type="number" value="" class="productsFoundInputBorders" disabled/> 
      </div> 
      <div style="padding-top:5px; "> 
       <label style="color:grey; margin-left:64px">Notes</label> 
       <input class="productsFoundInputBorders" type="text" style="width:530px !important;" value="" disabled/> 
      </div> 
     </div> 
    </label> 
</li> 
<li> 
    <label>code - desc 
     <input type="checkbox" name="eventActionToBeTaken" class="productsUl" /> 
     <div style="position: relative; padding-top:18px; padding-bottom:15px"> 
      <div style="margin-left:80px"> 
       <label style="color:grey">Qty</label> 
       <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/> 
       <label style="color:grey">Price</label> 
       <input type="number" value="" class="productsFoundInputBorders" style="margin-right:40px" disabled/> 
       <label style="color:grey">Discount(%)</label> 
       <input type="number" value="" class="productsFoundInputBorders" disabled/> 
      </div> 
      <div style="padding-top:5px; "> 
       <label style="color:grey; margin-left:64px">Notes</label> 
       <input class="productsFoundInputBorders" type="text" style="width:530px !important;" value="" disabled/> 
      </div> 
     </div> 
    </label> 
</li> 

  $("#productsFoundList").click(function() { //when list click 
     $(".productsUl").each(function() { //for each checkbox 
      if($(this).is(":checked") == true) 
      { 
       $("#basketButton").show(500); 
      } 
     }); 

     if($('.productsUl:checked').length == 0) 
     { 
      $("#basketButton").hide(500); 
     } 
    }); 

    $("#productsFoundList").click(function() { 
     if ($(".productsUl").is(":checked") == true) { 
      $(".productsFoundInputBorders").prop('disabled', false); 
     } 
     else 
     { 
      $(".productsFoundInputBorders").prop('disabled', true); 
     } 
    }); 

Answer 1

嘗試

var $basket = $("#basketButton"); 
var $checks = $(".productsUl").change(function() { //for each checkbox 
    $(this).next().find(".productsFoundInputBorders").prop('disabled', !this.checked); 
    $basket.stop(true, true)[$checks.filter(':checked').length == 0 ? 'hide' : 'show'](500) 
}); 

演示：Fiddle