如何使收音機看起來像禁用但不指定disabled =“disabled”，只使用css和js
[英]How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js
問題描述
我們知道，如果我們將disabled =“disabled”設置為無線電，則在提交到后端時，其值將在表單中丟失。 和無線電沒有readonly屬性。 現在，我不想為禁用的無線電添加隱藏，我只想使用js和css使它看起來像禁用。
<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>
6 個解決方案
解決方案1
2 2014-12-05 09:28:36
你可以使用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>
解決方案2
1 2014-12-05 09:10:26
通常它只適用於常見的CSS規則。 所以：
input[type="radio"] {
background-color: light-grey;
border: 0 none;
}
不幸的是，Firefox不支持通過CSS進行任何顏色更改，因此我目前為止唯一的選擇是使用背景圖像（使用禁用單選按鈕的圖像）。 參考
問候Mainz007
解決方案3
1 已采納 2014-12-05 09:12:20
我相信你可以用pointer-events: none來模仿readonly屬性pointer-events: none ，它不適合你嗎？
<input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/>
或者你可以在后端處理這種情況。 如果收音機被禁用，那么我想你想使用某種默認值，只需在后端分配即可。
解決方案4
0 2014-12-05 09:09:53
您可以使用此插件使其看起來像禁用。 http://widowmaker.kiev.ua/checkbox/
解決方案5
0 2014-12-05 09:19:27
瀏覽器有不同的方式來顯示表單控件，因此沒有全面的解決方案來設置單選按鈕的樣式，使其看起來與禁用的單選按鈕完全相同。
但是，您可以使用disabled="true"屬性的相鄰無線電控制（並且對於您希望在表單提交時提交的每個無線電，使用class="disabled-overlay" ，並將要顯示的無線電輸入禁用為“禁用” 類 “，使用以下CSS（請參閱此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;
}
解決方案6
0 2014-12-05 09:36:53
您可以將無線電設置為禁用，單擊提交按鈕時，使用以下代碼和jquery庫刪除禁用
$("#sub").click(function(){
$("input").removeAttr('disabled');
});
<input type="submit" value="Save" id="sub" />
如果 === 1，則 JS 禁用元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.