更新Html.TextBoxFor「只讀」屬性打開和關閉

Question

我很喜歡這個， 在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" }) 

我們設置一個HANDL呃

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

編輯

基於在TextBoxFor元素值的值我想另一個TextBoxFor元件來變更和關閉它的只讀屬性。 <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);