JavaScript：點擊複選框啓用文本框

Question

我有一個由下拉列表選擇項目生成的JavaScript動態表格。 我的表格包含複選框，顯示名稱的列和輸入數量的列。 我想要的是讓所有文本框禁用untel其行被檢查。 這是我的JavaScript代碼和殘疾人不適合我。

<script> 
    $(function() { 
     $("#ProduitID").change(function() { 

      $.get("/Demandes/GetGabarit", { produit: $("#ProduitID").val() }, function (data) { 

       $("#Gabarit").empty(); 
       $.each(data, function (index, row) { 

        $("#Gabarit").append($("<tr>").append("<td>" + "<input type=checkbox name= gabarit class=Check value='" + row.CodeBarre + "'/>" + "</td>" 
                  + "<td>" + row.Designation + "</td>" 
                 + "<td>" + "<input type=text style=width:50px; name=Qt class=Quantite/>" + "</td>" 

        )); 


       }); 
      }) 
     }); 

    }); 
    $(document).ready(function() { 
     $('#checkBoxAll').click(function() { 
      if ($(this).is(":checked")){ 
       $('.Check').prop('checked', true); 
       $('.Quantite').prop('disabled', false); 
} 
      else{ 
       $('.Check').prop('checked', false); 
       $('.Quantite').prop('disabled', true); 
} 
     }); 
    }); 

</script> 

查看：

<div class="form-group"> 
      @Html.LabelFor(model => model.Produit, "Produit", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 

       @Html.DropDownListFor(p => p.CodeBarre, ViewBag.Produit as SelectList, "Sélectionner un produit", new { id = "ProduitID", @class = "form-control" }) 
       @Html.ValidationMessageFor(model => model.Produit, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      @Html.LabelFor(model => model.CodeBarre, "Gabarit", htmlAttributes: new { @class = "control-label col-md-2" }) 
      <div class="col-md-10"> 

       <table class="table table-striped"> 
        <thead> 
         <tr> 
          <th width="25%"><input type="checkbox" id="checkBoxAll" /></th> 
          <th width="25%">@Html.DisplayNameFor(model => model.Designation)</th> 

          <th width="25%">@Html.DisplayNameFor(model => model.Quantite)</th> 

         </tr> 
        </thead> 
        <tbody id="Gabarit"> 
         <tr> 
          <td class="Designation"></td> 

          <td class="Quantite" ></td> 
          <td class="Check"></td> 
         </tr> 
        </tbody> 
       </table> 
       @Html.ValidationMessageFor(model => model.CodeBarre, "", new { @class = "text-danger" }) 
      </div> 
     </div> 

     <div class="form-group"> 
      <div class="col-md-offset-2 col-md-10"> 
       <input type="submit" value="Submit" class="btn btn-default" /> 
      </div> 
     </div> 

謝謝。

Answer 1

試試這個代碼 -

$(document).on('change', '#checkBoxAll', function() { 

      if ($(this).is(":checked")){ 
       $('.Check').prop('checked', true); 
       $('.Quantite').prop('disabled', false); 
} 
      else{ 
       $('.Check').prop('checked', false); 
       $('.Quantite').prop('disabled', true); 
} 

    }); 

Answer 2

不知道你最後的HTML（您要發送一個視圖），我可以幫你這個代碼：

 <input type="checkbox" id="checkBoxAll" value="second_checkbox" checked="checked"> 


     <input type="textbox" id="txt1" class="Quantite" value="1"> 
     <input type="textbox" id="txt2" class="Quantite" value="2"> 
     <input type="textbox" id="txt3" class="Quantite" value="3"> 



$(document).ready(function() { 
    $('#checkBoxAll').change(function() { 
     if ($(this).is(":checked")){ 
      $('.Quantite').prop('disabled', 'disabled'); 
        } 
     else{ 
      $('.Quantite').prop('disabled',''); 
        } 
    }); 
}); 

工作JSFiddle