How can I disable and enable other buttons in Javascript something like a radio button effect?

Question

We are using the following script to set the color theme on my page. When user clicks a button and it sets a class on the HTML. When the user clicks another button(s) then it sets that classname instead. This works okay.

<script type="text/javascript">
    if (localStorage.buttonColor) {
        document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    }
    function getButtonColor(buttonName) {
        localStorage.buttonColor = buttonName;
        document.getElementsByTagName('html')[0].className = buttonName
    }
</script>

If there's a localstorage value for the button color then it sets the class. However we also need it to disable the button. How can we make it disable the button based on the value of the localstorage?

Also if a user clicks on a button then we want that button to be disabled and all the others with the class "theme" to be enabled. We are looking for a javascript only solution.

Here's the HTML:

<form class="ng-pristine ng-valid">
   <button class="theme" name="darkBlue" onclick="getButtonColor(this.name)">Blue</button>
   <button class="theme" name="black" onclick="getButtonColor(this.name)">Black</button>
</form>

Here's one solution but it's not quite all that's needed as we have now decided to give the buttons a class name to make it easier to select them. Also this only works for getting from local storage and we still need to disable a button if a user clicks it and enable all the others.

if (localStorage.buttonColor) {
    document.getElementsByTagName('html')[0].className = localStorage.buttonColor
    var buttons = document.body.getElementsByTagName('form')[0].getElementsByTagName('button')
    for(var i =0; i < buttons.length; i++)
        if(buttons[i].name == localStorage.buttonColor) button.disabled = true
}

b_dubb · Answer 1 · 2013-10-11T14:02:17.777

<script type="text/javascript">

function muteButtons(buttonObj)
{
    buttons = buttonObj.parentNode.getElementsByTagName('button');
    for(i=0;i<buttons.length;i++){
        buttons[i].disabled=true;
    }
    buttonObj.disabled=false;
}

function restoreButtons(linkObj)
{
    buttons = linkObj.parentNode.getElementsByTagName('button');
    for(i=0;i<buttons.length;i++){
        buttons[i].disabled=false;
    }
}

</script>


<div id="example">
    <button id="b1" onclick="muteButtons(this)">Button 1</button><br />
    <button id="b2" onclick="muteButtons(this)">Button 2</button><br />
    <span id="restore" onclick="restoreButtons(this)">restore buttons</span>
</div>

The problem with disabling buttons is that once they're disabled ... they're disabled. So toggling back and forth becomes a problem. So to turn buttons back 'on' I added a second function that will restore all the buttons.

score 0 · Answer 2 · edited May 23 '17 at 12:21

You can do some sort of if statement to determine if you want to enable/disable the button.

document.getElementById("id").setAttribute("disabled", "true")

If you require disabling/enabling ALL buttons, then you can do a "getElementByTagName" to find the elements you are looking for and loop through them as you did previously.

EDIt: As per a previous post

The proper way to remove that disabled attribute is:

element.removeAttribute("disabled");

Setting the disabled attribute can be done in any of these ways (all the same result)

.setAttribute("disabled", "true")
.setAttribute("disabled", "false")
.setAttribute("disabled", "disabled")

score 0 · Answer 3 · answered Oct 10 '13 at 20:29

Change HTML to this

<form class="ng-pristine ng-valid">
   <button class="theme" name="darkBlue" onclick="getButtonColor(this)">Blue</button>
   <button class="theme" name="black" onclick="getButtonColor(this)">Black</button>
</form>

JavaScript:

function getButtonColor(element) {

    localStorage.buttonColor = element.name;
    document.getElementsByTagName('html')[0].className = element.name;

    // Enable other elements
    var toenable = document.querySelectorAll(".theme");        
    for (var k in toenable){
         toenable[k].removeAttribute("disabled");
    }

    // Disable current element
    element.setAttribute("disabled", "disabled");
}

score 0 · Answer 4 · answered Oct 10 '13 at 21:24

<script type="text/javascript">
    if (localStorage.buttonColor) {
        document.getElementsByTagName('html')[0].className = localStorage.buttonColor;

    }
    function getButtonColor(element) {
        localStorage.buttonColor = element.name;
        document.getElementsByTagName('html')[0].className = element.name;

        var element_id = element.id;

        if (element_id == "darkBlue") {
            document.getElementById("darkBlue").disabled = true;
            document.getElementById("black").disabled = false;
        }
        if (element_id == "black") {
            document.getElementById("black").disabled = true;
            document.getElementById("darkBlue").disabled = false;
        }
    }

How can I disable and enable other buttons in Javascript something like a radio button effect?

4 Answers4