admin管理员组文章数量:1415100
as we know, if we set disabled="disabled" to the radio, its value will lost in the form when submitting to backend. and radio doesn't have readonly attribute. now, i don't want to add a hidden for the disabled radio, i just want to use js and css to make it looks like disabled.
<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>as we know, if we set disabled="disabled" to the radio, its value will lost in the form when submitting to backend. and radio doesn't have readonly attribute. now, i don't want to add a hidden for the disabled radio, i just want to use js and css to make it looks like disabled.
<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>- With Michal and Vitorino's help, thank you. i make the css like this #radio1 { pointer-events: none; opacity:0.5; } it works fine in chrome and firefox, but IE... any ments for IE – Pierre Wang Commented Dec 9, 2014 at 1:59
6 Answers
Reset to default 2you can use opacity
#radio1 {
opacity:.5;
}<input type="radio" id="radio1" onclick="return false" />
<input type="radio" id="radio2" disabled="disabled" />or just create your own style by adding any element
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>I believe you can mimic the readonly attribute with pointer-events: none, wouldn't it suit you?
<input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/>
Or you could handle this situation in backend. If the radio is disabled-like then I guess you want to use some kind of default value, just assign it in backend.
Normally it works just by the mon CSS-rules. So:
input[type="radio"] {
background-color: light-grey;
border: 0 none;
}
Unfortunatly Firefox doesn't support any color changes via CSS, so your only option, that I know so far, is using background-image (using an image of an disabled radio button). Reference
Greetings Mainz007
You can make it look like disabled using this plugin. http://widowmaker.kiev.ua/checkbox/
Browsers have different ways of displaying form controls, so there will be no catch-all solution to style a radio button to appear exactly like a disabled radio button.
However, you could an adjacent radio control with the disabled="true" attribute (and class="disabled-overlay" to each radio you want submitted on form submission, and give the radio inputs that you want to appear disabled the class "disabled", with the following CSS (see it in action in 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;
}
you can set radio to disabled and when click the submit button remove the disabled using the following code with the jquery library
$("#sub").click(function(){
$("input").removeAttr('disabled');
});
<input type="submit" value="Save" id="sub" />
本文标签：
版权声明：本文标题：javascript - How to make a radio looks like disabled but don't specify disabled="disabled", just using 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745153349a2645018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论