Question

你知道如何禁用复选框吗？

E.g：

<input type="checkbox" value="All Terrain Vehicle"
       name="exfilter_All Terrain Vehicle"
       id="exfilter_All_Terrain_Vehicle"
       class="exfilter" disabled="">

Answer 1

使用css中的属性选择器

input[disabled]{
  outline:1px solid red; // or whatever
}

仅供复选框使用

input[type=checkbox][disabled]{
  outline:1px solid red; // or whatever
}

示例http://www.jsfiddle.net/gaby/pxKcR/2/

Answer 2

您无法直接设置已禁用的复选框，因为它受浏览器/操作系统的控制。

但是，您可以聪明，并使用标签来替换复选框，该标签使用纯CSS模拟复选框。您需要有一个相邻的标签，您可以使用该标签来设置一个新的＆＃34;伪复选框＆＃34;。基本上你完全重绘了它，但它可以让你完全控制它在任何状态下的外观。

我已经抛出了一个基本示例，以便您可以看到它的实际效果：http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

以下是样本：

＆＃13;

input[type="checkbox"] {
    display: none;
}

label:before {
    background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #035f8f;
    height: 36px;
    width: 36px;
    display: block;
    cursor: pointer;
}
input[type="checkbox"] + label:before {
    content: '';
    background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #3d9000;
    color: #96be0a;
    font-size: 38px;
    line-height: 35px;
    text-align: center;
}

input[type="checkbox"]:disabled + label:before {
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

input[type="checkbox"]:checked + label:before {
    content: '✓';
}

＆＃13;

<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>

＆＃13;

根据您的浏览器兼容性和可访问性级别，需要进行一些额外的调整。

Answer 3

使用:disabled CSS3 pseudo-selector

Answer 4

您可以使用css选择它：

input[disabled] { /* css attributes */ }

Answer 5

使用CSS的:disabled选择器（对于CSS3）：

checkbox-style { }
checkbox-style:disabled { }

或者您需要使用javascript根据启用/禁用它时更改样式（假设根据您的问题启用/禁用它）。

Answer 6

复选框（单选按钮和<select>）是操作系统级别的组件，而不是浏览器级别的组件。您无法以跨浏览器和操作系统一致的方式可靠地设置它们的样式。

你最好把它叠加在上面并改为风格。

Answer 7

这也得到了IE的支持：

HTML

class="disabled"

CSS

.disabled{
...
}

Answer 8

input[type='checkbox'][disabled][checked] {
width:0px; height:0px;
}
input[type='checkbox'][disabled][checked]:after {
 content:'\e013'; position:absolute; 
 margin-top:-10px;
 opacity: 1 !important;
 margin-left:-5px;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
}

Answer 9

如果您试图阻止某人更新复选框，使其显示为禁用状态，则只需使用JQuery

$（'input [type = checkbox]'）。click（false）;

然后可以设置复选框的样式。

Answer 10

如果您真的想为复选框添加一些颜色，请尝试此解决方法。

input[type=checkbox][disabled] {
  outline: 5px solid red;
  outline-offset: -20px;
}

如何设置禁用复选框的样式？

10 个答案: