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