Question

我有两个chech Boxes（其中一个禁用）。我已经用带有切换功能的背景颜色的div替换了复选框，因此checked = green，unchecked = red。

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代码来在禁用复选框时更改外观吗？

Answer 1

我想你想要这样的东西：

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

检查Fiddle

Answer 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>

*除非不可避免

Answer 3

您需要撰写:disabled

类似的东西：

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

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

3 个答案:

不要使用Javascript *