web-dev-qa-db-fra.com

Désactiver la case à cocher cliquer via CSS

Est-il possible de désactiver les clics checkbox via CSS. Mais en gardant la fonctionnalité de checkbox intacte, nous pouvons donc définir ses valeurs de manière dynamique en utilisant Javascript. Je n'ai pas pu trouver une solution adéquate. 

pointer-events:none

n'a pas marché

htmlcsscheckbox
17
Jacob

Si pointer-events n'est pas pris en charge par votre navigateur, alors non, pas seulement avec css.

5
Tetaxa

juste la solution html sera comme ça.

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

si vous souhaitez faire ceci en utilisant javascript

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

Vous pouvez mettre une div transparente en haut de la case à cocher pour la rendre non cliquable en basculant une classe sur l'objet parent . Quelque chose comme ça ...

.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

Vous avez probablement besoin de javascript pour cela. Vous pouvez utiliser cet exemple si vous utilisez jQuery:

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

Ou une méthode rapide et sale, ajoutez un attribut onClick à la case à cocher comme ceci:

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

Ceci est possible en définissant pointer-events: none sur un élément parent de la case à cocher :)

0
Tyler

Non, cela ne semble pas possible.

Vous devrez peut-être CACHER. Utilisez input type = "hidden" pour stocker des informations et les traiter avec JS.

0
Minister