Javascript 如何将复选框设为只读？没被禁用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12267242/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a checkbox readonly? not disabled?
提问by Naga
I have a form where I have to post form values to my action class. In this form I have a checkbox that needs to be readonly. I tried setting disabled="true"but that doesn't work when posting to the action class.
我有一个表单，我必须将表单值发布到我的操作类。在这个表单中，我有一个需要只读的复选框。我尝试设置，disabled="true"但在发布到操作类时不起作用。
So please advice??
所以请指教？？
采纳答案by AleX
You can easily do this by css. HTML :
您可以通过 css 轻松完成此操作。 HTML :
<form id="aform" name="aform" method="POST">
<input name="chkBox_1" type="checkbox" checked value="1" readonly />
<br/>
<input name="chkBox_2" type="checkbox" value="1" readonly />
<br/>
<input id="submitBttn" type="button" value="Submit">
</form>
CSS :
CSS :
input[type="checkbox"][readonly] {
pointer-events: none;
}
回答by Kundan Singh Chouhan
回答by Patrick Lee Scott
<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>
If you are worried about tab order, only return false for the keydown event when the tab key was not pressed:
如果您担心 Tab 键顺序，请仅在未按下 Tab 键时为 keydown 事件返回 false：
<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>
回答by MRodrigues
I personally like to do it this way:
我个人喜欢这样做：
<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">
I think this is better for two reasons:
我认为这更好，原因有两个：
- User clearly understand that he can't edit this value
- The value is sent when submitting the form.
- 用户清楚地了解他无法编辑此值
- 该值在提交表单时发送。
回答by Viktor S.
You may simply add onclick="return false"- this will stop browser executing default action (checkbox checked/not checked will not be changed)
您可以简单地添加onclick="return false"- 这将停止浏览器执行默认操作（复选框选中/未选中不会更改）
回答by user1170104
I use JQuery so I can use the readonly attribute on checkboxes.
我使用 JQuery，所以我可以在复选框上使用 readonly 属性。
//This will make all read-only check boxes truly read-only
$('input[type="checkbox"][readonly]').on("click.readonly", function(event){event.preventDefault();}).css("opacity", "0.5");
If you want the checkbox to be editable again then you need to do the following for the specific checkbox.
如果您希望复选框再次可编辑，则需要对特定复选框执行以下操作。
$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
回答by Luca C.
Make a fake checkbox with no name and value, force the value in an hidden field:
创建一个没有名称和值的假复选框，强制隐藏字段中的值：
<input type="checkbox" disabled="disabled" checked="checked">
<input type="hidden" name="name" value="true">
Note: if you put name and value in the checkbox, it will be anyway overwritten by the input with the same name
注意：如果您将名称和值放在复选框中，无论如何它都会被具有相同名称的输入覆盖
回答by Eric
None of the above worked for me. Here's my vanilla.js solution:
以上都不适合我。这是我的 vanilla.js 解决方案：
(function() {
function handleSubmit(event) {
var form = event.target;
var nodes = form.querySelectorAll("input[disabled]");
for (var node of nodes) {
node.disabled = false;
}
}
function init() {
var submit_form_tag = document.getElementById('new_whatever');
submit_form_tag.addEventListener('submit', handleSubmit, true);
}
window.onload = init_beworst;
})();
Be sure to provide an appropriate replacement for the form id.
请务必为表单 ID 提供适当的替换。
My application has a bit of context, where some boxes are pre-checked, and others you have a limit of how many of the other boxes you can check. When you hit that limit, all the non-pre-checked boxes are disabled, and if you uncheck one all the non-pre-checked boxes are enabled again. When the user presses submit all the checked boxes are submitted to the user, regardless of whether they're pre-checked or not.
我的应用程序有一些上下文，其中一些框是预先选中的，而另一些框则限制了您可以选中的其他框的数量。当您达到该限制时，所有未预选中的框都将被禁用，如果您取消选中一个，所有未预选中的框将再次启用。当用户按下提交时，所有选中的框都会提交给用户，无论它们是否被预先选中。
回答by Connectify_user
Simple to understand and works for me
简单易懂，对我有用
<input type="checkbox" name="yourinputname" value="inputvalue" disabled="disabled" />
回答by Anton Efremenkov
Through CSS:
通过 CSS：
<label for="">
<input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>
pointer-events not supported in IE<10
IE<10 不支持指针事件
