Question 189041 in Html Question posted in
Some basic documentation can be found here.

Html – Making an unclickable radio button

I’m looking to create a particular broken interface: enabled radio buttons that cannot be clicked but do some action onclick. I can write the onclick function but the radio button always selects and stays selected. I’m using ReactJS but I don’t think that will make a difference. What should I do?

Tags:

3

Answers


  1. 0

    You can add "disabled" attribute to HTML inputs to make them uninteractable:

    <input type="radio" disabled>
    Login or Signup to reply.
  2. 0

    You can make use of the checked prop on the radio button to ensure if the radio button is checked or not. onChange prop will help you do stuff when you click the button. You can use that to determine if you want to change your checked button.

    import { useState } from "react";

export default function App() {
  const [value, setValue] = useState(null);

  return (
    <div role="radiogroup">
      <input
        type="radio"
        name="bla"
        value="first"
        checked={value === "first"}
        onChange={(e) => {
          if (e.target.checked) setValue("first");
        }}
      />
      <input
        type="radio"
        name="bla"
        value="second"
        checked={value === "second"}
        onChange={(e) => {
          console.log("Second button was clicked!!!");
        }}
      />
    </div>
  );
}
    Login or Signup to reply.
  3. 0 
    <input type="radio" name="foo" value="Foo" onclick="this.checked=false">

    or:

    <input type="radio" name="foo" value="Foo" onclick="myInput(this)">
<script>
    function myInput(e){
        e.checked = false;
        alert("I'm Clicked!");
    }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search