拒絕更改復選框的狀態

Question

我需要拒絕更改任何復選框的狀態：

 window.doNotChange = function(event) { e = event || window.event; if (e) { e.stopPropagation(); e.preventDefault(); var t = $(e.target); t.prop({checked: typeof t.attr('checked') != 'undefined'}); } alert('Deny to change THIS checkbox!'); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><label><input type="checkbox" checked onchange="doNotChange(event)"> name 1 (readonly)</label></p> <p><label><input type="checkbox" onchange="doNotChange(event)"> name 2 (readonly)</label></p> <p><label><input type="checkbox" checked> name 3 (editable)</label></p> <p><label><input type="checkbox" checked onchange="doNotChange(event)"> name 4 (readonly)</label></p> <p><label><input type="checkbox"> name 5 (editable)</label></p> <p>etc.</p> 

此代碼有效。 但是有更好的解決方案嗎？

Answer 1

只需使用HTML的disabled屬性：

 <input type="checkbox" disabled /> 

Answer 2

只需簡單地禁用那些您不會更改的選項，該怎么辦：

document.getElementById("your_field_id").disabled = true;

Answer 3

現在，我僅看到一種解決方案：將元素和默認值傳輸到函數

 window.doNotChange=function(el,v){ $(el).prop({checked:v}); alert('Can\\'t touch this'); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p><label><input type="checkbox" checked onchange="doNotChange(this,1)"> name 1 (readonly)</label></p> <p><label><input type="checkbox" onchange="doNotChange(this,0)"> name 2 (readonly)</label></p> <p><label><input type="checkbox" checked> name 3 (editable)</label></p> <p><label><input type="checkbox" checked onchange="doNotChange(this,1)"> name 4 (readonly)</label></p> <p><label><input type="checkbox"> name 5 (editable)</label></p> 

謝謝答案