HTML复选框可以设置为只读吗？

我以为他们可以,但是因为我不把钱放在我的嘴里(可以这么说)设置readonly属性实际上似乎没有做任何事情.

我宁愿不使用Disabled,因为我希望检查复选框与表单的其余部分一起提交,我只是不希望客户端在某些情况下能够更改它们.

1> 小智..：

---

你可以用这个:

这是有效的,因为从click事件返回false会停止执行链继续.

---

在javascript中返回false会阻止继续执行click或key handler的执行链.与复选框的状态无关

---

但是,阻止使用TAB导航到下一个输入.

---

PS ...如果你想让复选框处于检查状态,你需要添加`checked ="checked"`,而不是搞乱javascript.javascript就是强制鼠标点击在输入对象上被忽略,而不是设置复选框的状态.

---

在这种情况下,没有r/o状态的直观指示.

---

如果禁用javascript,则完全失败!

2> ConroyP..：

---

READONLY不适用于复选框,因为它会阻止您编辑字段的值,但是使用复选框实际上您正在编辑字段的状态(打开||关闭)

来自faqs.org:

重要的是要理解,READONLY只是阻止用户更改字段的值,而不是与字段交互.例如,在复选框中,您可以打开或关闭它们(从而设置CHECKED状态),但不要更改字段的值.

如果您不想使用disabled但仍想提交该值,那么如何将值作为隐藏字段提交,并在不符合编辑条件时将其内容打印给用户呢？例如

// user allowed change
if($user_allowed_edit)
{
    echo ' Check value';
}
else
{
    // Not allowed change - submit value..
    echo '';
    // .. and show user the value being submitted
    echo ' Check value';
}

---

工作,但它有点......肮脏,只读复选框应该只是做直觉告诉.

---

直觉并不欺骗美国,它欺骗那些以这种方式实施复选框的人.

---

ConroyP解释说,直觉愚弄了我们.

3> powtac..：

---

这是一个您无法更改的复选框:

只需添加disabled="disabled"为属性即可.

编辑以解决评论:

如果您希望回发数据,则简单的解决方案是将相同的名称应用于隐藏的输入:

这样,当复选框设置为"禁用"时,它仅用于数据的可视化表示,而不是实际"链接"到数据.在回发中,当禁用复选框时,将发送隐藏输入的值.

---

请注意,"已禁用"复选框不会通过POST数据发送值.

---

这个答案不可能有105个赞成票.它反对OP所说的一切.

---

@powtac你没有解决他想要发布的数据,你的例子没有这样做.

---

@MichaelBray我猜这会得到很多赞成,因为很多人都想知道如何只读取复选框,所以他们这样做:1)Google"Checkbox readonly".2)看到这个问题的标题符合他们想要做的并点击它.3)向下滚动,直到找到答案.4)幸福和赞成.

---

@nathanhayfield:根据这个逻辑,我应该能够发布有关*any*主题的有用答案并获得upvotes.:(

---

@AkshaySinghal因为它为其他不是操作的人服务!

---

为什么这个答案有这么多的赞成？问题清楚地表明,残疾人不能达到目的!

---

@ JM4是的,它应该是downvoted,我使用我的第一个downvote,永远!:)(我不会失去代表？!我想我不能失去125).

---

它得到了我的支持,因为它对我需要的东西很好 - 我在面向用户的页面上使用复选框作为状态,但是值(如果它不是只读)已经最终被推入另一个字段,所以我不关心复选框字段本身的值.:)

4> Grant Wagner..：

---

但是你绝对必须验证服务器上的数据以确保它没有被更改.

---

我发现这是最好的解决方案; 另外,我可以调用另一段代码(例如,一些jquery-stuff)来显示一个漂亮的小符号,上面写着"直到你第一次做x才能改变它".所以类似于:"... onclick ='this.checked =!this.checked; javascript:theCheckboxWasClicked();'..."

---

如上所述,这在IE中双击时不起作用.我用过:onchange ="this.checked = true;"

5> 小智..：

---

另一个"简单解决方案":

disabled ="disabled"/ disabled = true

---

你也可以从你的虚拟框中删除`name`和`value`属性,同样`="checked"`和`="diabled"`attrib-values可以被删除.http://www.w3.org/TR/html-markup/input.checkbox.html

6> FlySwat..：

---

这提出了一些可用性问题.

如果您想显示一个复选框,但不想让它与之互动,为什么即使是一个复选框呢？

但是,我的方法是使用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;
       }
    }
}

---

另一个选项是显示禁用的复选框(或图像或任何表示已选中/未选中的内容),并具有由服务器处理的隐藏输入.

---

目的是使用一个复选框作为显示字段"此值为true",这比一堆"true"/"false"-s更容易扫描表格.当然,你可以使用一个图标,但在一个表格中,复选框似乎在那里,适合使用.

---

当你得到一个表格,其中你的某些决定会影响其他一些输入时,这不是一个可用性问题(也就是说:如果你不撤消你的第一个动作,设置一个无法触及的值).我讨厌人们试图改变人们的想法而不是回答(这不是关于你@FlySwat,你回答).

7> Jan..：

---

用jquery:

$(':checkbox[readonly]').click(function(){
            return false;
        });

提供一些视觉提示(css,text,...)仍然是一个好主意,控件不会接受输入.

---

我使用"data-readonly = true"而不是标准属性,它在所有浏览器中都能正常工作.我更喜欢这个解决方案,而不是其他+1

8> Osama Javed..：

---

我用它来实现结果:

9> 小智..：

---

我碰巧注意到下面给出的解决方案.发现它是我对同一问题的研究.我不是谁发布它但它不是由我制作的.它使用jQuery:

$(document).ready(function() {
    $(":checkbox").bind("click", false);
});

这将使复选框只读,这将有助于向客户端显示只读数据.

10> 小智..：

---

onclick="javascript: return false;"

11> 小智..：

---

12> Rinto George..：

---

会对你有用,我正在使用它

13> sksallaj..：

---

这里的一些答案似乎有点迂回,但这是一个小小的黑客.

    
    
?

然后在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/

---

而这不是"迂回"？