Cara menggunakan javascript disable button

Radio button is an input type that is used to get input from the user by selecting one value from multiple choices. You have seen the radio buttons to choose gender between male and female. We select only one entry, either male or female and leave the other entries are unselected.

Table of Contents Show

Disable the radio button
Disable radio button using dropdown
Disable radio button using checkbox
A simple radio button example

There might be some cases when we need to disable the other entries based on some conditions. You can enable and disable the radio button by using the disabled property of HTML DOM. Set this property to true (disable=true) to disable the radio button in JavaScript.

Disable the radio button

Sometimes, we need to disable the radio button for a specific condition. These are special conditions when we disable the radio button. When the radio buttons get disabled, their color changed to grey.

In the below examples, we will learn how to disable the radio button:

Here, we will use a dropdown list having Yes and No as values to enable or disable the radio buttons. If you choose No, all the radio buttons will be disabled. On the other hand, all the radio buttons will be enabled if you select Yes.

Note that you can use the checkbox as well instead of a dropdown list.

Copy Code

Test it Now

Output 1

You will get the output same as the given below by running the above code. Here, first choose either Yes or No from the dropdown list.

Output 2

By selecting No from the dropdown list, all radio buttons will get disabled, and you will not be allowed to choose any of the programming languages. See the screenshot below:

Output 2

By selecting Yes from the dropdown list, all radio buttons will get enabled again. So, you will be able to choose one programming language. See the screenshot below:

Disable radio button using checkbox

Now we will use a checkbox to disable the radio button.

Copy Code

Test it Now

Output

You will get the output same as the given below by running the above code. Here, checkbox is already checked, you just need to choose one programming language by clicking on radio button.

Uncheck the checkbox if you are not a developer. The radio buttons will get disabled by unchecking the checkbox.

So, these are the different methods to disable the radio button.

A simple radio button example

It is a simple example of radio button created. In this example, we will create set of radio button for gender and language selection. The input will be taken using the HTML form and calculated by JavaScript. See the code below:

Copy Code

Test it Now

Output

See the below screenshot for radio button. Here, selects one value from each set of radio buttons. We have selected gender = female and language = hindi.

After selecting the radio button values, click on the Show Selected Values button, and you will get the selected values have displayed on the web.

Assalamualaikum.. Mohon bantuannya gan/sis.. saya membuat sistem CRUD di halaman website saya, nah pada bagian Create, saya ingin ketika Data Projeknya lebih dari 3. tombol "Tambah Projek" atau Create-nya menjadi Disable, jadi tidak bisa menambahkan projek lagi. harus menggunakan jquery ya gan/sis ?

@gafarwidyo

6 Kontribusi 1 Poin

Dipost: 5 tahun yang lalu Update 2 tahun yang lalu

Jawaban Terpilih

Setiap selesai tambah project dicek jumlah project ada brapa, kalo masih dibawah 3 biarin. Kalo ternyata jumlah project sudah 3 baru di disabled. Ga harus pake jquery, javascript aja bisa. Logikanya kira2 seperti ini.

var button = document.getElementById("tambah_project");
var total_project = 0;
function add_project()
{
    if(total_project < 3)
    {
        total_project++;
    }
    if(total_project >= 3)
    {
        button.disabled = true;
    }
}

@rachmatsasongko

410 Kontribusi 426 Poin

Dipost: 5 tahun yang lalu Update 4 tahun yang lalu

Jawaban

var button = document.getElementById("tambah_project");
var total_project = 0;
function add_project()
{
    if(total_project < 3)
    {
        total_project++;
    }
    if(total_project >= 3)
    {
        button.disabled = true;
    }
}

@rachmatsasongko

410 Kontribusi 426 Poin

Dipost: 5 tahun yang lalu Update 4 tahun yang lalu

Oke gan Terimakasih, saya coba dulu. Sangat membantu :)

@gafarwidyo

6 Kontribusi 1 Poin

Dipost: 5 tahun yang lalu

bagaimana gan? apakah berhasil? Saya nyoba belum berhasil, Tolong bantu saya gan - @alimkruger

Mungkin lebih baik dicopykan aja dulu code awalnya. apakah itu masih html atau sudah menggunakan js atau menggunakan jquery. kalau memang penambahannya sudah menggunakan jqeuery (append) maka pembatasannya mending langsung di jquerynya. Sekalian izin nyimak....

@Ipinppc

22 Kontribusi 3 Poin

Dipost: 5 tahun yang lalu

@Ipinppc

22 Kontribusi 3 Poin

Dipost: 5 tahun yang lalu