禁用複選框單擊通過CSS

是否可以通過CSS禁用checkbox點擊次數。但保持checkbox的功能完好無缺所以我們可以使用Javascript動態設置它的值。我無法找到合適的解決方案。禁用複選框單擊通過CSS

pointer-events:none

沒有工作

來源

2014-01-22 Jacob

只有禁用設置pointer-events: none。但複選框的值仍然可以動態設置 – Jacob

您可以使用HTML - ''來實現。 – Vucko

那麼什麼是功能的複選框？ – NoobEditor

如果pointer-events是不是在你的瀏覽器不支持，那麼沒有，不是僅適用於CSS。

來源

2014-01-22 10:39:41 Tetaxa

問題在於'pointer-events：none'只適用於由於「指針事件」而改變值的輸入。與複選框和單選按鈕之類的輸入在交互時改變它們的狀態，而不是它們的值。不會讓你的答案不正確，但是有一點可以支持，即「指針事件」可以被支持，這仍然不起作用。 – KeithS

請記住，儘管已禁用指針事件，您仍然可以將「選項卡」複選框並使用「空格」鍵進行切換！ – schellmax

沒有，似乎可能它不會。

您可能需要隱藏它。使用input type =「hidden」來存儲信息並使用JS處理它。

來源

2014-01-22 10:23:59 Minister

您可能需要一些JavaScript。如果你正在運行的jQuery您可以使用此爲例：

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

還是一個快速和骯髒的方法，添加一個onClick屬性複選框是這樣的：

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

來源

2014-01-22 10:24:22

這仍然爲複選框設置CSS樣式，所以它看起來像被點擊。 – Jacob

只是html解決方案會是怎樣這個。

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

，如果你想做到這一點使用javascript

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

來源

2014-01-22 10:26:03

綠色嚮導不知道你的第一個解決方案只是** css ** ??在元素上設置disabled屬性是一個HTML解決方案。 – Dan

我的錯誤@丹。編輯它。 –

哦，不用擔心綠色精靈！ +1爲JS解決方案:) – Dan

您可以在複選框的頂部放置一個透明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>

來源

2015-01-21 10:59:39 johanthuresson

這是可以通過複選框的點擊複選框父元素:)

來源

2017-02-08 06:47:05 Tyler

禁用複選框單擊通過CSS

回答

相關問題