Отключенная метка, связанная с флажком с помощью селектора css

Question

Я хочу отключить метку, связанную с флажком. Ниже приведены фрагменты кода:

Код:

<label for="label1" class="form-checkbox-left"><input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>Name 1</label>

css: .form-checkbox-left input[type=checkbox]:disabled { color:#ccc; }

Каким-то образом это не работает.

Please help

Answer 1

Я только что дважды проверил с Firefox, и добавление любого определения стиля в флажок не меняет никакого аспекта его внешнего вида. Похоже, что вам не повезло, и вам пришлось бы использовать другой подход, скрыв сам флажок (не с display: none;, а с visibility: hidden;), а затем добавив вспомогательный CSS, чтобы фактически настроить его внешний вид.

Пример того, как это сделать, можно найти на http://cssdeck.com/labs/css-checkbox-styles
Может быть, это поможет вам найти метод, который подходит вам лучше всего.

EDIT

Если вы пытаетесь стилизовать родительскую метку флажка, вам не повезло, потому что селекторы родительских элементов до сих пор не реализованы в CSS, хотя предложение было сделано (см. https://shauninman.com/archive/2008/05/05/css_qualified_selectors ).

РЕДАКТИРОВАТЬ 2

Вы можете попробовать это, переместив определение метки позади определения флажка:

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled><label for="label1" class="form-checkbox-left">Name 1</label>

Тогда ваш CSS должен выглядеть так, чтобы облегчить изменение:

input[type="checkbox"][disabled] + label {
  color: #ccc;
  }

Это в свою очередь изменяет текст вашей метки.

Answer 2

Вы можете использовать селектор element + element . Вам нужно поместить ввод перед меткой, однако

input[type=checkbox]:disabled+label {
  color: #ccc;
}

<input type="checkbox" name="labelname" id="label1" value="0" style="min-width: 20px;" disabled>
<label for="label1" class="form-checkbox-left">Name 1</label>

Answer 3

вы можете попробовать сделать с помощью jquery, используя if ($('label1'.hasAttribute('disabled')){ $('[for="label1"]').attr('disabled', 'disabled'); }

в [for = "label1"] вы можете указать идентификатор lable («если хотите»)