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