Как стилизовать отключенный флажок?

Ответ 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>

Ответ 2

Вы не можете установить флажок отключен напрямую, потому что он управляется браузером/ОС.

Однако вы можете быть умными и заменить флажок ярлыком, который имитирует флажок, используя чистый CSS. Вам нужно иметь соседнюю метку, которую вы можете использовать для создания нового "псевдо-флажка". По сути, вы полностью перерисовываете вещь, но она дает вам полный контроль над тем, как она выглядит в любом состоянии.

Я выбрал базовый пример, чтобы вы могли видеть его в действии: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/

Здесь образец:

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: '✓';
}

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

Ответ 3

Используйте :disabled псевдо-селектор CSS3

Ответ 4

Вы можете выбрать его с помощью css следующим образом:

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

Ответ 5

Используйте селектор CSS :disabled (для CSS3):

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

Или вам нужно использовать javascript для изменения стиля, основываясь на том, когда вы включаете/отключите его (предположим, что он включен/отключен на основе вашего вопроса).

Ответ 6

Флажки (переключатели и <select>) - это компоненты уровня ОС, а не уровень браузера. Вы не можете надежно стилизовать их таким образом, чтобы они были согласованы между браузерами и операционными системами.

Лучше всего поставить вместо этого верхний слой и стиль.

Ответ 7

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

Ответ 8

Это также поддерживается IE:

HTML

class="disabled"

CSS

.disabled{
...
}