Как я могу отключить кнопку после нажмите

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> 

Как я могу сделать так, что когда цвет выбрано, что кнопка для выбора этого цвета отключена, чтобы ее нельзя было выбрать еще раз? Затем, когда нажата другая кнопка, другие (ы) включены. Также мне нужно установить кнопку, выбранную из localstorage, в отключенную. Извините, я не упомянул об этом полностью в вопросе раньше.

Answer 1

В дополнение к другим ответам (просто отправить кнопку в обработчике), вы можете использовать это, когда первоначально установив цвет из localStorage (если ваша «форма» является первым ребенком «тела»):

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 2

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