如何在 Javascript 中禁用和启用其他按钮，例如单选按钮效果

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

本文关键字：按钮 单选按钮 其他 Javascript 启用      更新时间：2023-09-26

我们正在使用以下脚本在我的页面上设置颜色主题。当用户单击按钮并在 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>

如果按钮颜色有本地存储值，则设置类。但是，我们还需要它来禁用按钮。我们如何根据本地存储的值使其禁用按钮？

此外，如果用户单击一个按钮，那么我们希望禁用该按钮，并启用所有其他具有"主题"类的按钮。我们正在寻找一个只有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
}

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

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

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

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

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

EDIt：根据上一篇文章

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

element.removeAttribute("disabled");

设置禁用属性可以通过以下任何一种方式完成(所有相同的结果(

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

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

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

相关文章：