Question

如何根据页面加载和下拉选择更改时下拉列表的值删除属性并“灰显”文本框？我已经尝试过以下建议here和here，但它似乎只是在进行下拉列表更改。在Visual Studio或Chrome控制台中没有显示错误。

View具有一个下拉列表，该下拉列表加载了用户保存的选项，只有在下拉列表选择更改并更改后，文本框才会变为不可用，此时下拉列表值的原始值也应该最初将文本框加载为不可用。换句话说，文本框应该在下拉值== 1的每个点都不可用，但以下似乎没有这样做：

<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>
}

Answer 1

换句话说，文本框在下拉值== 1
的每个点都不可用

您最好还在加载时触发.change()。使用.prop()添加/删除元素属性。看看下面的代码。

$(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>

删除页面加载和更改时的属性

1 个答案: