如何使收音机看起来像禁用，但不指定禁用=“禁用”，只是使用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>

与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;"/>

或者你可以在后端处理这种情况。如果收音机是禁用的 - 就像我想你想使用某种默认值，只需将其分配在后端。

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/

答

正常情况下，它只是通过常用的CSS规则工作。所以：

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

不幸的是Firefox不支持通过CSS任何颜色的变化，所以你唯一的选择，我知道，到目前为止，使用背景图片（使用已禁用的单选按钮的图像）。 Reference

问候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; 
}

答

可以使用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>

不透明度：.5;看起来不错，也不适合IE – 2014-12-09 01:56:01

答

你可以设置无线电禁用时单击提交按钮使用下面的代码删除禁用创建你自己的风格jquery库

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

如何使收音机看起来像禁用，但不指定禁用=“禁用”，只是使用css和js

相关推荐