如何使收音機看起來像禁用，但不指定禁用=「禁用」，只是使用css和js

如我們所知，如果我們設置disabled =「disabled」到收音機，它的值將會丟失在窗體中當提交到後端時。而收音機沒有隻讀屬性。現在，我不想添加一個隱藏的殘疾無線電，我只是想用js和css使它看起來像禁用。如何使收音機看起來像禁用，但不指定禁用=「禁用」，只是使用css和js

<html> 
 
<head> 
 
<title>TEST</title> 
 
<script> 
 

 
</script> 
 
<style> 
 
#radio1 { 
 
    /* how to make radio1 looks same as radio2*/ 
 
    pointer-events: none; 
 
    opacity:0.5; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<input type="radio" id="radio1" onclick="return false"/> 
 
<input type="radio" id="radio2" disabled="disabled"/> 
 
</body> 
 
</html>

來源

2014-12-05 Pierre Wang

與Michal和Vitorino的幫助，謝謝。我做這樣的css ＃radio1 {0} {0} {0} pointer-events：none; 不透明度：0.5; } 它在Chrome和Firefox中正常工作，但IE ... 對IE瀏覽器的任何評論 – 2014-12-09 01:59:31

我相信你可以模仿readonly屬性與pointer-events: none，是不是適合你？

<input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/>

或者你可以在後端處理這種情況。如果收音機是禁用的 - 就像我想你想使用某種默認值，只需將其分配在後端。

來源

2014-12-05 09:12:20

1+對於指針事件：無 – 2014-12-05 09:53:24

@JohanSundénthx，但我無法在任何地方看到+1 :) – 2014-12-05 09:59:52

@PierreWang您想向最終用戶提供什麼級別的向後兼容性？從IE11開始支持['pointer-events']（http://caniuse.com/#feat=pointer-events）。因此，如果用戶瀏覽您的網站與 2014-12-09 08:42:58

你可以把它用這個插件看起來像禁用。 http://widowmaker.kiev.ua/checkbox/

來源

2014-12-05 09:09:53

正常情況下，它只是通過常用的CSS規則工作。所以：

input[type="radio"] { 
    background-color: light-grey; 
    border: 0 none; 
}

不幸的是Firefox不支持通過CSS任何顏色的變化，所以你唯一的選擇，我知道，到目前爲止，使用背景圖片（使用已禁用的單選按鈕的圖像）。 Reference

問候Mainz007

來源

2014-12-05 09:10:26 Mainz007

瀏覽器具有不同的顯示錶單控件的方式，因此不會出現全面的解決方案來使單選按鈕的樣式與禁用的單選按鈕完全相同。

但是，你可以用disabled="true"屬性（和class="disabled-overlay"你想在提交表單提交每個無線電鄰近無線電控制，給您想要的無線電輸入出現禁用類「已禁用」，用下面的CSS（看到它在行動中this jsfiddle）

div.radio-container input.disabled-overlay { 
    display: none; 
} 
div.radio-container input.disabled { 
    display: none; 
} 

div.radio-container input.disabled + input.disabled-overlay { 
    display: inline-block; 
}

來源

2014-12-05 09:19:27

可以使用opacity

#radio1 { 
 
    opacity:.5; 
 
}

<input type="radio" id="radio1" onclick="return false" /> 
 
<input type="radio" id="radio2" disabled="disabled" />

或只是添加任何元素

label { 
 
    display: inline-block; 
 
    width: 25px; 
 
    height: 25px; 
 
    position: relative; 
 
} 
 
input[type="radio"] { 
 
    position: absolute; 
 
    visibility: hidden; 
 
} 
 
input[type="radio"] + label { 
 
    border: 1px solid rgb(208, 208, 208); 
 
    border-radius: 50%; 
 
} 
 
label:before { 
 
    content: ''; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
    background: rgb(208, 208, 208); 
 
    left: 0; 
 
    top: 0; 
 
    display: inline-block; 
 
    width: 19px; 
 
    height: 19px; 
 
    margin: 3px 0 0 3px; 
 
}

<input type="radio" id="radio1" onclick="return false" /> 
 
<label for="radio1"></label> 
 
<input type="radio" id="radio2" disabled="disabled" /> 
 
<label for="radio2"></label>

來源

2014-12-05 09:28:36

不透明度：.5;看起來不錯，也不適合IE – 2014-12-09 01:56:01

你可以設置無線電禁用時單擊提交按鈕使用下面的代碼刪除禁用創建你自己的風格jquery庫

$("#sub").click(function(){ 
     $("input").removeAttr('disabled'); 
    }); 
<input type="submit" value="Save" id="sub" />

來源

2014-12-05 09:36:53

如何使收音機看起來像禁用，但不指定禁用=「禁用」，只是使用css和js

回答

相關問題