我有一个表单，我必须将表单值发布到我的操作类。在这种形式中，我有一个需要只读的复选框。我尝试设置disabled="true"，但在发布到操作类时不起作用。
所以请指教？？
【问题讨论】：
标签： javascript checkbox
【讨论】：
您可以简单地添加onclick="return false" - 这将停止浏览器执行默认操作（复选框选中/未选中不会被更改）
【讨论】：
<input type="checkbox" checked onclick="return false;" onkeydown="return false;"/>
如果你担心tab顺序，只在不按下tab键时为keydown事件返回false：
<input type="checkbox" checked onclick="return false;" onkeydown="e = e || window.event; if(e.keyCode !== 9) return false;"/>
【讨论】：
我个人喜欢这样做：
<input type="checkbox" name="option" value="1" disabled="disabled" />
<input type="hidden" name="option" value="1">
我认为这更好有两个原因：
【讨论】：
我使用 JQuery，所以我可以在复选框上使用只读属性。
//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");
如果您希望复选框再次可编辑，则需要对特定复选框执行以下操作。
$('specific checkbox').off('.readonly').removeAttr("readonly").css("opacity", "1")
【讨论】：
document.getElementById("your checkbox id").disabled=true;
【讨论】：
I tried setting disabled="true" but that doesn't work when posting to the action class. - OP 正在寻找不依赖于 disabled attr 的解决方案
您可以通过 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：
input[type="checkbox"][readonly] {
pointer-events: none;
}
【讨论】：
tab-index="-1"
制作一个没有名称和值的假复选框，强制隐藏字段中的值：
<input type="checkbox" disabled="disabled" checked="checked">
<input type="hidden" name="name" value="true">
注意：如果您在复选框中输入名称和值，无论如何它都会被具有相同名称的输入覆盖
【讨论】：
通过 CSS：
<label for="">
<input type="checkbox" style="pointer-events: none; tabindex: -1;" checked> Label
</label>
IE 不支持指针事件
【讨论】：
label标签； 2. 添加tabindex 属性 - 这不是样式。
以上都不适合我。这是我的 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;
})();
确保为表单 ID 提供适当的替换。
我的应用程序有一些上下文，其中一些框是预先选中的，而另一些框则限制了可以选中的其他框的数量。当您达到该限制时，所有未选中的框都将被禁用，如果您取消选中一个，则所有未选中的框都会再次启用。当用户按下提交时，所有选中的框都会提交给用户，无论它们是否被预先选中。
【讨论】：
就我而言，我只需要在特定条件下使用它，并且可以在 HTML 中轻松完成：
<input type="checkbox" [style.pointer-events]="(condition == true) ? 'none' : 'auto'">
或者如果你一直需要这个：
<input type="checkbox" style="pointer-events: none;">
【讨论】：
你不能直接做，但你可以用这种方式做我尝试过，它对我来说很好，同时它是如此简单
HTML：
<input type="checkbox" checked disabled="true" class="style" />
CSS：
.style{ opacity: 1; }
【讨论】：
disable=true，因为其他功能可能无法使用，例如表单发布。onclick='return false' 因为其他事件仍可能触发
更改，例如 keyup、keydown 聚焦时。e.preventDefault()pointer-events: none; 因为您可能希望允许更改
在特定条件下。然后在您的只读复选框的change 事件中执行此操作：
$("#chkReadOnly").on("change", function () {
// Enclose with 'if' statement if conditional.
// Simply restore back the default value, i.e. true.
$(this).prop("checked", true);
});
这将解决上述所有问题。
【讨论】：
这是我针对 Sencha ExtJS 7.2+ 的解决方案（覆盖）（单个覆盖中的复选框和单选）
Ext.define('MyApp.override.field.Checkbox', {
override: 'Ext.field.Checkbox',
/**
* OVERRIDE: to allow updateReadOnly to work propperly
* @param {boolean} newValue
*
* To ensure the disabled state stays active if the field is still readOnly
* we re - set the disabled state
*/
updateDisabled(newValue) {
this.callParent(arguments);
if (!newValue && this.getReadOnly()) {
this.inputElement.dom.disabled = true;
}
},
/**
* OVERRIDE: readonly for radiogroups and checkboxgroup do not work as other fields
* https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly
*
* @param {boolean} newValue
*
* - use disabled on the field
*/
updateReadOnly(value) {
this.callParent(arguments);
if (!this.getDisabled()) {
this.inputElement.dom.disabled = value;
}
}
});
【讨论】：