Cezar Cezar - 1 month ago 8
Javascript Question

If checkbox is checked then enable EditorFor

I would like my Checkbox to disable EditorsFor if it is unchecked and enable them if it is checked. I know I have to use JavaScript, I found some codes in net, but it seems that they don't work.

Here is my View code:

@{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>

(...)
}


And I wrote something like this and put in js file (ofc at the end of this code is ), but it doesn't work...

$(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", "");
}
});
});


Nothing happens even if I check or uncheck my checkbox. Can anyone help me with that?

Answer

Change your jQuery code to:

$(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");                
        }            
    });
});

The if condition on your code never actually evaluates to true because in an enabled input, the 'disabled' attribute doesn't have a value of an empty string. it just doesn't exist (thus the use of removeAttr("disabled")).

UPDATE: Working JSFiddle here

UPDATE 2:

In order to add the script in the Create view and have it show after the jQuery script tag in the rendered HTML do this:

First add a call to RenderSection in your Layout file just before the closing </body> tag like this:

@RenderSection("scripts", required: false)

This will give you the ability to include a 'scripts' section in your views, the contents of which, will appear instead of the RenderSection call in the final HTML. Note that the required: false parameter specifies that you don't have to include this section in every view.

Then in your Create view, outside of any section add this:

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

Hope this helps!

Comments