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

Question

你知道当它被禁用时我如何设计一个复选框吗？

例如：

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

原文由 Ozzy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在 css 中使用属性选择器

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

专供复选框使用

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

 $('button').click(function() {
  const i = $('input');

  if (i.is('[disabled]'))
    i.attr('disabled', false)
  else
    i.attr('disabled', true);
})

 input[type=checkbox][disabled] {
  outline: 2px solid red;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 4.0 许可协议