javascript - 更新和关闭Html.TextBoxFor“只读”属性

我对此很在行
在MVC上工作，更改Html.TextBoxFor值后，我想更改另一个Html.TextBoxFor的只读属性。
我尝试了几种方法-使用IE无效。
这里是一些代码：

@Html.TextBoxFor(x => x.NumberOfQuestion, new { id = "ExamOptions", onchange = "javascript:ReadOnlyHandle();" })

<script>
    function ReadOnlyHandle() {
        //document.getElementById("NoDiffNum").readOnly = true;
        var startHSelect = document.getElementById("NoDiffNum");
        debugger;
        startHSelect.setAttribute("readonly", "true");
    }
    debugger;
</script>

和我想更改的表中的行：

<td id="NoDiffNum">@Html.TextBoxFor(model => model.Topics[i].NumberOfNoDifficulltySet)</td>

readonly属性未更改-
任何帮助都是最欢迎的！

最佳答案

document.getElementById("NoDiffNum")引用<td>元素而不是文本框。您正在将td设置为只读。

您需要定位文本框，而不是td，因此将id移到文本框。

<td>@Html.TextBoxFor(model => model.Topics[i].NumberOfNoDifficulltySet, new { id="NoDiffNum" })</td>

没有jQuery

function ReadOnlyHandle() {
    var startHSelect = document.getElementById("NoDiffNum");
    startHSelect.setAttribute("readonly", "readonly");
}

并在您的函数中使用jQuery

function ReadOnlyHandle() {
    $("#NoDiffNum").prop("readonly", true);
}

如果我们使用jQuery，则可以删除内联onchange

@Html.TextBoxFor(x => x.NumberOfQuestion, new { id = "ExamOptions" })

我们设置了一个处理程序

$(document).ready(function() {
    $("#ExamOptions").on("change", function(event) {
        ReadOnlyHandle();
    });
});

编辑


  基于TextBoxFor元素值的值，我希望另一个TextBoxFor元素可以打开和关闭其readonly属性。 <div class="editor-field"> @Html.TextBoxFor(x => x.NumberOfQuestion, new { id = "ExamOptions", onchange = "javascript:ReadOnlyHandle();" }) @*@Html.EditorFor(model => model.NumberOfQuestion)*@ @Html.ValidationMessageFor(model => model.NumberOfQuestion) </div>


从您的评论中，现在您不清楚要设置为只读的内容。但是无论如何，您都可以在变更处理程序中调整目标ID。

 var targetId = "NumberOfQuestion";
 $("#" + targetId).prop("readonly", true);