How to make a radio looks like disabled but don't specify disabled=“disabled”, just using css and js


Tags: javascript,html,css

Problem :

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>



Solution :

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.


    CSS Howto..

    how to add classes to the dropdown menu in the TinyMCE table editor

    How to use media queries in css

    How to align form using css [closed]

    How do you target div last-child within another div?

    CSS how to select first occuring element after another element

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to fit in an image inside span tag when onclick?

    How can I display an alert with the position of the element that was clicked?

    How to hide extra overflow part of this angled css ribbon?

    How to use vertical menus in HTML and css?

    How to change the css class name dynamically in angular 2

    css - how to fix first td in table on top if the second td has multiline?

    How to reject specify HTML tags by using css or xpath selector

    Show/hide without using CSS

    How can I inject a static CSS File in GWT like it is done with JS Files?

    how to auto adjust table td width from the content

    Show a
  • line like is hovered
  • How can I make a fade in function without using jQuery like this? (JavaScript)

    How to place two paragraphs side by side (next to each other)?

    How to style checkbox using CSS?

    How do i create custom grid class in Bootstrap for lg as well as xs screen size?

    How to add this background-image effect to a div?

    How to manage css left property for fixed div

    How to decrease the width of this div so that another div can come next to it?

    How to have a horizontal line at the middle of a html heading with CSS?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How can I resize an image in an HTML generated word document whilst retaining the aspect ratio?

    How to use a CSS for only one div and not the rest of the code?

    how to add a css class to a list when the particular li is clicked using jquery?

    how to center css class images with text?