it-swarm.com.ru

Отключить чекбокс с помощью CSS

Можно ли отключить checkbox клики через CSS. Но сохраняя функциональность checkbox без изменений, поэтому мы можем динамически устанавливать его значения, используя Javascript. Я не смог найти правильного решения. 

pointer-events:none

не работал

17
Jacob

Если pointer-events не поддерживается в вашем браузере, то нет, не только с css.

5
Tetaxa

только решение html будет таким.

<input type="checkbox" disabled="disabled" id="checkBox"/>

если вы хотите сделать это с помощью javascript

document.getElementById("checkBox").disabled=true;
19
Green Wizard

Вы можете поместить прозрачный div поверх флажка, чтобы сделать его недоступным для клика, переключив класс на родительский объект .... Что-то вроде этого ...

.container{
  position:relative;
  display:block;

}
.cover{
  width:100%;
  height:100%;
  background:transparent;
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  display:none;

}

.container.disable-checkbox .cover{
  display:block;
}
<div class="container">
  <div class="cover"></div>
  <input type="checkbox"/> "clickable"

</div>
<div class="container disable-checkbox">
  <div class="cover"></div>
  <input type="checkbox"/> "un-clickable"
</div>

9
johanthuresson

Возможно, вам понадобится JavaScript для этого. Вы можете использовать этот пример, если вы используете JQuery:

$('input[type="checkbox"]').on('click', function(ev){
    ev.preventDefault();
})

Или быстрый и грязный метод, добавьте атрибут onClick к флажку следующим образом:

<input type="checkbox" onClick="return false;">
3
Hans Westman

Это возможно, установив pointer-events: none на родительский элемент флажка :)

0
Tyler

Нет, это не представляется возможным.

Возможно, вам нужно скрыть это. Используйте input type = "hidden" для хранения информации и обработки ее с помощью JS.

0
Minister