Click here to Skip to main content
15,918,976 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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
Updated 2-Mar-20 17:58pm

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
}
 
Share this answer
 
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);
    }));
});
 
Share this answer
 
Comments
cristian frias 2-Mar-20 22:55pm    
Hi, followed your suggestion but your codes is not working. Thank you.
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>
 
Share this answer
 
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.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900