How to disable radio button

In this article, you will learn how to disable radio button. We will discuss two ways for disabling a radio button.

So, to disable a radio button, we can simply use the disabled attribute. On the other hand, we can use JavaScript checked property.

Disable a radio button using HTML attribute. #

In the first example, we will use the HTML disabled attribute to disable a radio button. Syntax :

<input type="radio" disabled="">

<label>
  <input type="radio" name="my-btn"> Radio button 1
</label>
<label>
  <input type="radio" name="my-btn"> Radio button 2
</label>
<label>
  <input type="radio" name="my-btn" disabled=""> Disable button
</label>

Click on the Try it Yourself » button to open the code in our online editor.

How to disable radio button in JavaScript. #

In the second example, we will use JavaScript checked property. The example is given below.

<input onclick="this.checked=false;" type="radio">

<label>
  <input type="radio" name="my-btn"> Radio button 1
</label>
<label>
  <input type="radio" name="my-btn"> Radio button 2
</label>
<label>
  <input onclick="this.checked=false;alert('Sorry, this option is not available!')" type="radio" name="my-btn"> Disable button
</label>

How to disable radio button

Disable a radio button using HTML attribute. #

How to disable radio button in JavaScript. #

Related Questions

Comments (0)