打开和关闭Html.TextBoxFor“只读”属性

Question

我正在处理这个问题，在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>

只读属性没有改变-任何帮助都是最受欢迎的！

Answer 1

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元素更改其只读属性on和off。<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);