javascript - 如果选中复选框，则启用 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:

为了在“创建” View 中添加脚本并使其显示在渲染的 HTML 中的 jQuery 脚本标记之后，请执行以下操作:

首先在布局文件中在结束 </body> 之前添加对 RenderSection 的调用像这样的标签:

@RenderSection("scripts", required: false)

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

然后在“创建” View 中的任意部分之外添加以下内容:

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

希望这有帮助!