How to disable radio button

Question

Apu January 22, 2023 › #Attribute › #Button

❌

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>

Write Your Answer

Apu · Accepted Answer · 2023-01-22T05:00:00+05:30

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