javascript - 文本框根据下拉选择的值变为只读

Question

如何将文本框的属性更改为只读而不是隐藏它？

下拉菜单:

<div class="form-group">
@Html.LabelFor(model => model.CIVSTAT, "Civil Status", htmlAttributes: new { @class = "control-label" })    
<select class="form-control" id="CIVSTAT" name="CIVSTAT">
<option> </option>
<option>Single</option>
 <option>Married</option>
<option>Widowed</option>
<option>Separated</option>
<option>Divorced</option>
</select>
@Html.ValidationMessageFor(model => model.CIVSTAT, "", new { @class = "text-danger" })
</div>

文本框:

 <div class="form-group">
    @Html.LabelFor(model => model.SPOUSE, "Spouse", htmlAttributes: new { @class = "control-label" })
    @Html.EditorFor(model => model.SPOUSE, new { htmlAttributes = new { @class = "form-control", @autocomplete = "off", placeholder = "Spouse's Name", maxlength = 40, @id="spouse" } })
    @Html.ValidationMessageFor (model => model.SPOUSE, "", new { @class = "text-danger" })
 </div>

JS 代码:

  < script >
    $("#CIVSTAT").change(function () {
        if ($(this).val() == "Single") {
            $('#spouse').hide();                       
        }else {
            $('#spouse').show();               
        }
    });

Answer 1

请尝试使用以下代码片段。

$("#CIVSTAT").change(function () {
    if ($(this).val() == "Single") {
        $('#spouse').attr('readonly', true);                       
    }else {
        $('#spouse').removeAttr('readonly');               
    }
});