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

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

pointer-events:none

не работает

Ответ 1

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

Ответ 2

просто решение html будет таким.

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

если вы хотите сделать это, используя javascript

document.getElementById("checkBox").disabled=true;

Ответ 3

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

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

Ответ 4

Для этого вам, вероятно, нужен javascript. Вы можете использовать этот пример, если вы используете jQuery:

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

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

<input type="checkbox" onClick="return false;">

Ответ 5

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

Вам может понадобиться СКРЫТЬ ЭТО. Используйте тип ввода = "скрытый", чтобы хранить информацию и обрабатывать ее с помощью JS.

Ответ 6

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