如何禁用和启用 Javascript 中的其他按钮，例如单选按钮效果？答案

【问题标题】：How can I disable and enable other buttons in Javascript something like a radio button effect?如何禁用和启用 Javascript 中的其他按钮，例如单选按钮效果？
【发布时间】：2013-10-10 20:17:10
【问题描述】：

我们正在使用以下脚本在我的页面上设置颜色主题。当用户单击一个按钮并在 HTML 上设置一个类时。当用户单击另一个按钮时，它会改为设置该类名。这工作正常。

<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>

如果按钮颜色有一个 localstorage 值，那么它会设置类。但是，我们还需要它来禁用按钮。我们如何根据 localstorage 的值使其禁用按钮？

此外，如果用户单击一个按钮，那么我们希望禁用该按钮，并启用所有其他具有“主题”类的按钮。我们正在寻找一个仅限 JavaScript 的解决方案。

这是 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>

这里有一个解决方案，但这并不是我们所需要的全部，因为我们现在决定给按钮一个类名，以便于选择它们。此外，这仅适用于从本地存储获取，如果用户单击它，我们仍然需要禁用按钮并启用所有其他按钮。

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
}

【问题讨论】：

标签： javascript

【解决方案1】：

<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>

禁用按钮的问题在于，一旦它们被禁用......它们就会被禁用。所以来回切换成为一个问题。因此，为了将按钮重新“打开”，我添加了第二个功能，该功能将恢复所有按钮。

【讨论】：

【解决方案2】：

您可以执行某种 if 语句来确定是否要启用/禁用按钮。

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

如果您需要禁用/启用所有按钮，那么您可以执行“getElementByTagName”来查找您要查找的元素并像以前一样遍历它们。

编辑：根据之前的post

删除禁用属性的正确方法是：

element.removeAttribute("disabled");

可以通过以下任何一种方式设置 disabled 属性（结果都一样）

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

【讨论】：

【解决方案3】：

把 HTML 改成这个

<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");
}

【讨论】：

【解决方案4】：

<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;
        }
    }

【讨论】：