CODEWITHSUNDEEP
htmlcss
Karnivaurus
Karnivaurus

Reputation: 24121

Creating a simple radio buttons form with greyed-out buttons

In the following code:

<form>
     <input type="radio" style="disabled:true">Alpha<br>
     <input type="radio" style="enabled:false">Beta<br>
     <input type="radio">Gamma<br>
</form>

1) Why is it allowing me to select more than one radio button at a time?

2) How to I "grey out" specific radio buttons? The "enabled" and "disabled" attributes do not seem to be working.

Upvotes: 0

Views: 2221

Answers (3)

Jacob G
Jacob G

Reputation: 14172

To make a group of radio buttons, give them all the same name:

<form>
     <input type="radio" name="group1">Alpha<br>
     <input type="radio" name="group1">Beta<br>
     <input type="radio" name="group1">Gamma<br>
</form>

Demo
To disable a radio button, use the disabled attribute in its tag:

<form>
         <input type="radio" name="group1">Alpha<br>
         <input type="radio" name="group1">Beta<br>
         <input type="radio" name="group1" disabled>Gamma<br>
    </form>

Demo
Disabled is not a CSS attribute so it is not defined within the style attribute.
As commented above you can also wrap the <input> in a <label> tag like so: 

<form>
             <label><input type="radio" name="group1">Alpha</label><br>
             <label><input type="radio" name="group1">Beta</label><br>
             <label><input type="radio" name="group1" disabled></label>Gamma<br>
        </form>

Or you can link the label with the inputs id:

<label for="alpha">Alpha</label>
 <input type="radio" name="group1" id="alpha">

Then the user can click on the text instead of just the radio button. Demo

Upvotes: 3

chresse
chresse

Reputation: 5805

  1. a group of radiobuttons must have the same same to select only one:
  2. use the html disabled attribute to disable a radio <input type="radio" disabled>

so your solution would be:

<form>
     <input type="radio" name="rb1">Alpha<br>
     <input type="radio" name="rb1">Beta<br>
     <input type="radio" name="rb1" disabled>Gamma<br>
</form>

Upvotes: 1

Turnip
Turnip

Reputation: 36682

The disabled attribute isn't a css style. You disable an input like this:

<form>
     <input type="radio" name="radGroup">Alpha<br>
     <input type="radio" name="radGroup" disabled>Beta<br>
     <input type="radio" name="radGroup">Gamma<br>
</form>

notice also the name attribute. This will prevent multple radio buttons been selected at once. Each input in the group must share the same name

DEMO

Upvotes: 1

Related Questions