如果選中此復選框，則啟用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

更新2：

為了將腳本添加到“創建”視圖中，並在呈現的HTML中的jQuery腳本標記之后顯示該腳本，請執行以下操作：

首先在</body>標記之前 ，在布局文件中添加對RenderSection的調用，如下所示：

@RenderSection("scripts", required: false)

這將使您能夠在視圖中包括“腳本”部分，其內容將代替最終HTML中的RenderSection調用出現。 請注意， required: false參數指定您不必在每個視圖中都包括此部分。

然后在“創建”視圖的任何部分之外添加以下內容：

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

希望這可以幫助！