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