如果选中复选框，则启用 EditorFor

Question

如果未选中，我希望我的复选框禁用 EditorsFor，如果选中，则启用它们。我知道我必须使用 JavaScript，我在网上找到了一些代码，但似乎它们不起作用。

这是我的查看代码：

@{Html.RenderPartial("_PartialError");}
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

(...)

    <div class="form-group">
        @Html.LabelFor(model => model.Czy_zuzywalny, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <div class="checkbox">
                @Html.EditorFor(model => model.Czy_zuzywalny)
                @Html.ValidationMessageFor(model => model.Czy_zuzywalny, "", new { @class = "text-danger" })
            </div>
        </div>
    </div>

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

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

    (...)
}

我写了这样的东西并放入js文件（这段代码末尾的ofc是），但它不起作用......

    $(document).ready(function ()
{
    $("#Czy_zuzywalny").click(function ()
    {
        if ($("#Ilosc_minimalna").attr("disabled") == "")
        {
            $("#Ilosc_minimalna").attr("disabled", "disabled");
            $("#Ilosc_optymalna").attr("disabled", "disabled");
            $("#Ilosc_minimalna").attr("value", "0");
            $("#Ilosc_optymalna").attr("value", "0");
        }
        else
        {
            $("#Ilosc_minimalna").attr("disabled", "");
            $("#Ilosc_optymalna").attr("disabled", "");
        }
    });
});

即使我选中或取消选中我的复选框，也不会发生任何事情。谁能帮我解决这个问题？

Answer 1

将您的 jQuery 代码更改为：

$(document).ready(function () {
    $("#Czy_zuzywalny").click(function () {

        if ($("#Ilosc_minimalna").is('[disabled=disabled]')) {
            $("#Ilosc_minimalna").removeAttr("disabled");
            $("#Ilosc_optymalna").removeAttr("disabled");
        }
        else {
            $("#Ilosc_minimalna").attr("disabled", "disabled");
            $("#Ilosc_optymalna").attr("disabled", "disabled");
            $("#Ilosc_minimalna").attr("value", "0");
            $("#Ilosc_optymalna").attr("value", "0");                
        }            
    });
});

代码中的 if 条件实际上永远不会计算为 true，因为在启用的输入中，'disabled' 属性没有空字符串的值。它只是不存在（因此使用removeAttr("disabled")）。

更新：工作JSFiddle here

更新 2：

为了在创建视图中添加脚本并让它在呈现的 HTML 中的 jQuery 脚本标记之后显示，请执行以下操作：

首先在布局文件中在结束</body>标签之前添加对RenderSection的调用，如下所示：

@RenderSection("scripts", required: false)

这将使您能够在视图中包含“脚本”部分，其内容将出现在最终 HTML 中，而不是 RenderSection 调用。请注意，required: false 参数指定您不必在每个视图中都包含此部分。

然后在您的创建视图中，在任何部分之外添加：

@section scripts {
<script src="/scripts/CheckBoxItemCreate.js"></script>
}

希望这会有所帮助！