Disabled and enabled multiple button on user click.

Question

0.00/5 (No votes)

See more:

I have a group of buttons that will enabled/disabled when user click the other. For example user click "North" then north button will be disabled for selection while the remaining buttons will remain enabled. Then user select another button then north will be enabled and the button user select will be disabled. Sorry just a newbie in Javascript. Any help would be so much appreciated. Thank you!

What I have tried:

HTML

<button id="one" onclick="disable()"  >North Cebu</button>
<button id="two" onclick="disable()"  >Central Cebu</button>
<button id="three" onclick="disable()"  >Cebu City</button>
<button id="four"  onclick="disable()" >South Cebu</button>
<button id="five"  onclick="disable()" >West Cebu</button>
<button id="six" onclick="disable()" >East City</button>

JavaScript

function disable() {
       document.getElementById("one").disabled = true;
   }
   function enable()
   { document.getElementById("two").disabled = false; }

Posted 23-Feb-20 19:47pm

cristian frias

Updated 2-Mar-20 17:58pm

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2020-02-23T23:28:00

Your function needs to implement a loop that enables all the buttons except the one that was clicked.
So the necessary logic would be something like:

function clicked(buttonID)
{
    foreach button in list_of_buttons
    if (button.id == buttonID
        disable it
    else
        enable it
}

ishan_shah · Answer 2 · 2020-02-25T19:44:00

Solution 2

I have a solution to solve this by giving the class name "btn" to all button and applying the following jquery code on click of it. :

JavaScript

$(document).ready(function () {
    ($(".btn").click(function () {
        $("#" + this.id).prop('disabled', true);
        $(".btn").not(this).prop('disabled', false);
    }));
});

Posted 25-Feb-20 19:44pm

ishan_shah

Comments

cristian frias 2-Mar-20 22:55pm

Hi, followed your suggestion but your codes is not working. Thank you.

ishan_shah · Answer 3 · 2020-03-02T17:58:00

Solution 3

I think you have not added the jquery CDN script in your head or body tag to work Jquery in your program.

So you should add this following script tag :

JavaScript

<pre> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Posted 2-Mar-20 17:58pm

ishan_shah

Comments

cristian frias 3-Mar-20 1:00am

Yep it is now working but all buttons is disabled. For example I clicked button one then button 1 is disabled then I clicked button 2 then button 2 is disabled. What I am trying to accomplish is that when button 2 is clicked button 1 must be enabled. Thank you so much for your help.

Disabled and enabled multiple button on user click.

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us