webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie das Kontrollkästchen per CSS

Ist es möglich, checkbox-Klicks über CSS zu deaktivieren. Aber die Funktionalität der checkbox intakt halten So können wir ihre Werte dynamisch mit Javascript einstellen. Ich konnte keine richtige Lösung finden. 

pointer-events:none

funktioniert nicht

17
Jacob

Wenn pointer-events in Ihrem Browser nicht unterstützt wird, dann nein, nicht nur bei css.

5
Tetaxa

nur die html-Lösung wird so sein.

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

wenn Sie dies mit javascript tun möchten

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

Sie können ein transparentes div über das Kontrollkästchen setzen, um es nicht anklickbar zu machen, indem Sie eine Klasse für das übergeordnete Objekt umschalten ..

.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

Sie benötigen wahrscheinlich etwas Javascript dafür. Sie können dieses Beispiel verwenden, wenn Sie jQuery ausführen:

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

Oder eine schnelle und schmutzige Methode: Fügen Sie dem Kontrollkästchen ein onClick-Attribut hinzu:

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

Dies ist möglich, indem Sie pointer-events: none für ein übergeordnetes Element des Kontrollkästchens festlegen :)

0
Tyler

Nein, das scheint nicht möglich zu sein.

Möglicherweise müssen Sie es verstecken. Verwenden Sie input type = "hidden" , um Informationen zu speichern und mit JS zu verarbeiten.

0
Minister