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 center the image source within an image tag?

    How to align horizontally list if there is a sublist css

    How to make a shrink-to-fit container with max-height and scrollbars in the content area?

    How can I make this HTML5 canvas progress bar fill from the bottom up instead of the top down?

    How to get a border around this polygon?

    How to reveal part of blurred image where mouse is hovered?

    how to change properties of a parent div on hover of child div

    How to create footers in CSS

    How to change ListView cell's text color in JavaFX using css

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How to get the div block to be centered in a modal window

    How can I make the height of a div section to automatically adapt to the height of its content?

    How to adjust the height of the footer automatically

    How do I center a container in my HTML/CSS?

    How to fix error css width x height when run as mobile

    How to find address of css and js files?

    how to center css navigation bar

    How to have no border around a DIV

    how to make div with one line of text and div with two the same height?

    Bootstrap shows black rectangles when printing focused input elements

    How to include css and jquery in joomla component

    How to display shopping cart at the right of page

    How to create invoice / money reciept with html [closed]

    How can I remove this white space from a table?

    How to change the css class name dynamically in angular 2

    How to enable bootstrap 4 flex?

    How to make a left and right panel, and be able to slide a divider between them?

    How I can change the CSS properties of HTML elements in run time using JavaScript or PHP?

    How can I make a button apply a class to the next div in the document flow?

    CSS and jQuery current links navigation: how to update the
  • class