我以为他们可以,但是因为我不把钱放在我的嘴里(可以这么说)设置readonly属性实际上似乎没有做任何事情.
我宁愿不使用Disabled,因为我希望检查复选框与表单的其余部分一起提交,我只是不希望客户端在某些情况下能够更改它们.
小智 516
你可以用这个:
<input type="checkbox" onclick="return false;"/>
这是有效的,因为从click事件返回false会停止执行链继续.
Con*_*oyP 413
READONLY不适用于复选框,因为它会阻止您编辑字段的值,但是使用复选框实际上您正在编辑字段的状态(打开||关闭)
来自faqs.org:
重要的是要理解,READONLY只是阻止用户更改字段的值,而不是与字段交互.例如,在复选框中,您可以打开或关闭它们(从而设置CHECKED状态),但不要更改字段的值.
如果您不想使用disabled但仍想提交该值,那么如何将值作为隐藏字段提交,并在不符合编辑条件时将其内容打印给用户呢？例如
// user allowed change
if($user_allowed_edit)
{
echo '<input type="checkbox" name="my_check"> Check value';
}
else
{
// Not allowed change - submit value..
echo '<input type="hidden" name="my_check" value="1" />';
// .. and show user the value being submitted
echo '<input type="checkbox" disabled readonly> Check value';
}
pow*_*tac 324
这是一个您无法更改的复选框:
<input type="checkbox" disabled="disabled" checked="checked">
只需添加disabled="disabled"为属性即可.
编辑以解决评论:
如果您希望回发数据,则简单的解决方案是将相同的名称应用于隐藏的输入:
<input name="myvalue" type="checkbox" disabled="disabled" checked="checked"/>
<input name="myvalue" type="hidden" value="true"/>
这样,当复选框设置为"禁用"时,它仅用于数据的可视化表示,而不是实际"链接"到数据.在回发中,当禁用复选框时,将发送隐藏输入的值.
Gra*_*ner 63
<input type="checkbox" onclick="this.checked=!this.checked;">
但是你绝对必须验证服务器上的数据以确保它没有被更改.
小智 56
另一个"简单解决方案":
<!-- field that holds the data -->
<input type="hidden" name="my_name" value="1" />
<!-- visual dummy for the user -->
<input type="checkbox" name="my_name_visual_dummy" value="1" checked="checked" disabled="disabled" />
disabled ="disabled"/ disabled = true
Fly*_*wat 44
这提出了一些可用性问题.
如果您想显示一个复选框,但不想让它与之互动,为什么即使是一个复选框呢？
但是,我的方法是使用disabled(用户希望禁用复选框不可编辑,而不是使用JS使启用的不可用),并使用javascript添加表单提交处理程序,在表单之前启用复选框提交.通过这种方式,您可以发布您的值.
即是这样的:
var form = document.getElementById('yourform');
form.onSubmit = function ()
{
var formElems = document.getElementsByTagName('INPUT');
for (var i = 0; i , formElems.length; i++)
{
if (formElems[i].type == 'checkbox')
{
formElems[i].disabled = false;
}
}
}
Jan*_*Jan 36
<input type="checkbox" readonly="readonly" name="..." />
用jquery:
$(':checkbox[readonly]').click(function(){
return false;
});
提供一些视觉提示(css,text,...)仍然是一个好主意,控件不会接受输入.
Osa*_*ved 20
我用它来实现结果:
<input type=checkbox onclick="return false;" onkeydown="return false;" />
Pat*_*ali 19
迟来的答案，但大多数答案似乎过于复杂。
据我了解，OP基本上想要：
应该注意的是：
disabled属性，因为他们“希望选中的复选框与表单的其余部分一起提交”。yes或false，还可以是任何文本。因此，由于该readonly属性不起作用，不需要 javascript 的最佳解决方案是：
因此，对于选中的复选框：
<input type="checkbox" checked="checked" disabled="disabled" />
<input type="hidden" name="fieldname" value="fieldvalue" />对于未选中的复选框：
<input type="checkbox" disabled="disabled" />禁用输入（尤其是复选框）的主要问题是它们的对比度差，这对于某些具有某些视觉障碍的人来说可能是一个问题。用简单的词来表示一个值可能更好，例如Status: none或Status: implemented，但在使用后者时包括上面的隐藏输入，例如：
<p>Status: Implemented<input type="hidden" name="status" value="implemented" /></p>lit*_*die 13
目前的大多数答案都存在以下一个或多个问题：
以下是简单的，没有这些问题。
$('input[type="checkbox"]').on('click keyup keypress keydown', function (event) {
if($(this).is('[readonly]')) { return false; }
});
如果复选框是只读的，它不会改变。如果不是，它会。它确实使用了 jquery，但您可能已经在使用它了...
有用。
小智 12
我碰巧注意到下面给出的解决方案.发现它是我对同一问题的研究.我不是谁发布它但它不是由我制作的.它使用jQuery:
$(document).ready(function() {
$(":checkbox").bind("click", false);
});
这将使复选框只读,这将有助于向客户端显示只读数据.
如果您希望它们以表单形式提交到服务器但不与用户交互，您可以pointer-events: none在 css 中使用（适用于除 IE10- 和 Opera 12- 之外的所有现代浏览器）并设置 tab-index 以 -1防止通过键盘进行更改。另请注意，您不能使用label标签，因为单击它无论如何都会更改状态。
input[type="checkbox"][readonly] {
pointer-events: none !important;
}
td {
min-width: 5em;
text-align: center;
}
td:last-child {
text-align: left;
}<table>
<tr>
<th>usual
<th>readonly
<th>disabled
</tr><tr>
<td><input type=checkbox />
<td><input type=checkbox readonly tabindex=-1 />
<td><input type=checkbox disabled />
<td>works
</tr><tr>
<td><input type=checkbox checked />
<td><input type=checkbox readonly checked tabindex=-1 />
<td><input type=checkbox disabled checked />
<td>also works
</tr><tr>
<td><label><input type=checkbox checked /></label>
<td><label><input type=checkbox readonly checked tabindex=-1 /></label>
<td><label><input type=checkbox disabled checked /></label>
<td>broken - don't use label tag
</tr>
</table>我会使用 readonly 属性
<input type="checkbox" readonly>
然后使用 CSS 禁用交互：
input[type='checkbox'][readonly]{
pointer-events: none;
}
请注意，使用伪类 :read-only 在这里不起作用。
input[type='checkbox']:read-only{ /*not working*/
pointer-events: none;
}
这对我在 Chrome 上有效：
<input type="checkbox" onclick="return false">
不可以，输入复选框不能是只读的。
但你可以用 javascript 将它们设置为只读！
随时随地添加此代码，通过防止用户以任何方式修改它，使复选框按假定只读工作。
jQuery(document).on('click', function(e){
// check for type, avoid selecting the element for performance
if(e.target.type == 'checkbox') {
var el = jQuery(e.target);
if(el.prop('readonly')) {
// prevent it from changing state
e.preventDefault();
}
}
});input[type=checkbox][readonly] {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked readonly> I'm readonly!</label>您可以在 jQuery 加载后随时添加此脚本。
它将适用于动态添加的元素。
它的工作原理是拾取页面上任何元素上的单击事件（在更改事件之前发生），然后检查该元素是否是只读复选框，如果是，则阻止更改。
这么多的if是为了不影响页面的性能。
小智 6
<input name="isActive" id="isActive" type="checkbox" value="1" checked="checked" onclick="return false"/>
这里的一些答案似乎有点迂回,但这是一个小小的黑客.
<form id="aform" name="aform" method="POST">
<input name="chkBox_1" type="checkbox" checked value="1" disabled="disabled" />
<input id="submitBttn" type="button" value="Submit" onClick='return submitPage();'>
</form>?
然后在jquery中,您可以选择以下两个选项之一:
$(document).ready(function(){
//first option, you don't need the disabled attribute, this will prevent
//the user from changing the checkbox values
$("input[name^='chkBox_1']").click(function(e){
e.preventDefault();
});
//second option, keep the disabled attribute, and disable it upon submit
$("#submitBttn").click(function(){
$("input[name^='chkBox_1']").attr("disabled",false);
$("#aform").submit();
});
});
演示:http: //jsfiddle.net/5WFYt/
小智 5
readonly不适用于<input type='checkbox'>
因此，如果您需要提交表单中禁用复选框的值，您可以使用 jQuery：
$('form').submit(function(e) {
$('input[type="checkbox"]:disabled').each(function(e) {
$(this).removeAttr('disabled');
})
});
这样，在提交表单时，禁用的属性就会从元素中删除。