单击后如何禁用按钮

Question

我正在使用以下脚本设置颜色：

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

这是我的HTML：

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

我如何才能做到这一点，以便在选择一种颜色后，用于选择该颜色的按钮被禁用，从而使其无法再次选择？ 然后，当单击另一个按钮时，将启用其他按钮。 另外，我需要将从本地存储中选择的按钮设置为禁用。 抱歉，我在前面的问题中没有完全提及这一点。

Answer 1

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

而只需发送this ：

<button name="darkBlue" onclick="getButtonColor(this)">Blue</button>
<button name="black" onclick="getButtonColor(this)">Black</button>

---

_{<disclaimer> inline javascript is evil</disclaimer>}

Answer 2

除了其他答案（只需在处理程序中发送按钮）之外，您还可以在最初从localStorage设置颜色时使用它（假设您的“ form”是“ body”的第一个孩子）：

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
}

尽管如果您经常需要在代码中查找元素，则可能要考虑使用jQuery，因为getElementsByTagName选择会变得很冗长。

Answer 3

您也可以使用：

function getButtonColor(button) {        
var elem=documentt.getElementById(button.id);
elem.removeAttribute("onclick");
}

Answer 4

首选是使用它并将其绑定到变量（通常是这样）。 在此，您将获得调用该函数的html对象。

http://www.quirksmode.org/js/this.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

 function getButtonColor() {
        var that = this; 
        localStorage.buttonColor = that.Name;
        document.getElementsByTagName('html')[0].className = that.Name; 
        that.disabled = "disabled"; 
    }