web-dev-qa-db-ja.com

CSSによるチェックボックスのクリックを無効にする

checkbox経由でCSSクリックを無効にすることは可能ですか？ただし、checkboxの機能をそのまま維持するため、Javascriptを使用して動的に値を設定できます。適切な解決策を見つけることができませんでした。

pointer-events:none

動作しませんでした

htmlcsscheckbox
17
Jacob

pointer-eventsはブラウザでサポートされていません。CSSのみではサポートされていません。

5
Tetaxa

ただhtmlソリューションはこのようになります。

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

javascriptを使用してこれを行う場合

document.getElementById("checkBox").disabled=true;
20
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>
11
johanthuresson

これにはおそらくJavaScriptが必要です。 jQueryを実行している場合は、次の例を使用できます。

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

または、迅速でダーティなメソッドの場合、次のようにチェックボックスにonClick属性を追加します。

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

これは、pointer-events: noneチェックボックスの親要素:)

0
Tyler

いいえ、不可能です。

あなたはそれを隠す必要があるかもしれません。 input type = "hidden"を使用して、情報を保存し、JSを使用して処理します。

0
Minister