禁用时如何在复选框上应用css？答案

【问题标题】：How to apply css on checkbox when it's getting disabled?禁用时如何在复选框上应用css？
【发布时间】：2015-05-22 10:31:17
【问题描述】：

我有两个 chech Box（其中一个已禁用）。我已将复选框替换为具有切换功能的背景颜色的 div，以便选中 = 绿色，未选中 = 红色。

HTML

<input type="checkbox" class="input_class_checkbox" disabled="disabled">    
<br/>
<input type="checkbox" class="input_class_checkbox">

JQUERY

$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

CSS

.class_checkbox {
width: 20px;  
height: 20px;
background-color: red;
}

.class_checkbox.checked {
  background-color: green;
}

 .class_checkbox.disabled {
  background-color: blue;
}

如何在页面加载时将这个.disabled CSS 应用于禁用的复选框？复选框也可以通过编程方式禁用，所以我可以实现onDisabled 类型的 Jquery 代码来在禁用复选框时更改外观吗？

【问题讨论】：

你有点想多了。只需在两个类之间切换。诸如“checkbox_enabled”和“checkbox_disabled”之类的东西，而不是试图诱使一个 HTML 属性去做一些它原本不打算做的事情。
只选择所有被分类的东西 $('.disabled').css( ....
@thisOneGuy 除了 OP 并没有真正创建一个禁用类。他正试图将此功能从禁用的 HTML 属性中挂起。
对于更实用的 JQ 代码示例，可能类似于：
BuggyCoder，你这里有两个状态，还是三个？看起来你要选择红色、绿色和蓝色。

标签： jquery html css

【解决方案1】：

我想你想要这样的东西：

$( "input:disabled" ).next().css( "background-color", "yellow" );

查看Fiddle

【讨论】：

【解决方案2】：

不要使用 Javascript*

理想情况下，您应该为此使用 HTML 和 CSS，而不依赖 Javascript。这确保了关注点的正确分离（HTML = 内容，CSS = 样式，JS = 功能）。它也是一种更清洁、更高效的解决方案。

input+span {
  height: 10px;
  width: 10px;
  display: inline-block;
  border: 1px solid;
}
input {
  display: none;
}
input:checked +span {
  background: lightgreen;
}
input:disabled + span {
  background: lightgrey;
}

<label>
  <input type="checkbox" />
  <span></span>
</label>

<label>
  <input type="checkbox" disabled />
  <span></span>
</label>

*除非不可避免

【讨论】：

【解决方案3】：

你需要写:disabled

类似：

 .input_class_checkbox:disabled {
  background-color: blue;
}

【讨论】：