Remove Attributes on Page Load and On Change

Question

How does one remove attributes and "gray out" a textbox based on the value of a dropdown upon both page load and dropdown selection change? I've tried following advice here and here, but it only seems to be working on a dropdown change. No errors are showing in Visual Studio or in the Chrome console.

The View has a dropdown that loads with the User's saved selection, and the text box becomes unavailable only after a dropdown selection change and change back, when the original value of the dropdown value should also originally load the text box as unavailable. In other words, the text box should be unavailable at every point where the dropdown value == 1, but the following doesn't seem to do it:

<div class="col-md-12" style="clear: left;">
    <label for="preferenceId" class="req">Preference</label>
    <div class="col-xs-8 no-left">
        @Html.DropDownListFor(m => m.PreferenceTypeID, StaticCache.GetPreferenceTypes(), new { @class = "form-control", data_parsley_required = "true" })
    </div>
    <div class="col-xs-4 no-right">
        <div id="customAmount">
            @Html.TextBoxFor(m => m.PreferenceCustomAmount, new { @class = "form-control" })
        </div>
    </div>
</div>

@section Scripts{
   <script>
    $(function () {
        if ($("#PreferenceTypeID").val() != 1) {
            $("#PreferenceCustomAmount").hide();
        } else {
            $("#PreferenceCustomAmount").show();
        }
    });
    $("#PreferenceTypeID").change(function () {
        if ($("#PreferenceTypeID").val() == 1) {
            $("#PreferenceCustomAmount").attr("disabled", "disabled");
        } else {
            $("#PreferenceCustomAmount").removeAttr("disabled", "disabled");
        }
    });
    </script>
}

Try this for removing the attribute `$("#PreferenceCustomAmount").removeAttr("disabled");` — Nemanja Milosavljevic, Aug 05 '15 at 17:34
Probably not the best solution, but after you add the listener for change event, trigger the `change` event on the element — leo.fcx, Aug 05 '15 at 17:35
why do you want to remove the attribute if the textbox is already hidden on page load? — Sushil, Aug 05 '15 at 17:36

score 0 · Accepted Answer · answered Aug 05 '15 at 17:41

In other words, the text box should be unavailable at every point where the dropdown value == 1

You'd be better of triggering .change() on load as well. Use .prop() to add/remove element properties. Take a look at the below code.

$(function() {

    var $amountInput = $("#PreferenceCustomAmount");
    $("#PreferenceTypeID").change(function () {
        if ( this.value == 1 ) {
            $amountInput.prop("disabled", true);
        } else {
            $amountInput.prop("disabled", false);
        }
    }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" style="clear: left;">
    <label for="preferenceId" class="req">Preference</label>
    <div class="col-xs-8 no-left">
        <select id="PreferenceTypeID">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>
    <div class="col-xs-4 no-right">
        <div id="customAmount">
            <input type="text" id="PreferenceCustomAmount" />
        </div>
    </div>
</div>

Remove Attributes on Page Load and On Change

1 Answers1