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

Question

你知道我如何在禁用复选框时设置它的样式吗？

例如:

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

$('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>