JavaScript:单击复选框启用文本框

Question

我有一个由 javascript 从下拉列表所选项目生成的动态表。我的表格包含一个用于复选框的列，一个用于显示名称的列和一个用于输入数量的列。我想要的只是禁用所有文本框，直到检查其行。这是我的 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);
}

    });