Javascript의 다른 버튼을 라디오 버튼 효과처럼 비활성화하고 활성화하려면 어떻게합니까?

Question

다음 스크립트를 사용하여 내 페이지의 색상 테마를 설정합니다. 사용자가 버튼을 클릭하면 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의 값에 따라 버튼을 비활성화 할 수 있습니까?

또한 사용자가 버튼을 클릭하면 해당 버튼을 비활성화하고 "테마"클래스를 가진 다른 모든 버튼을 활성화 할 수 있습니다. 우리는 자바 스크립트 전용 솔루션을 찾고 있습니다.

다음은 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 
} 

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

문제 은 사용할 수있어 한 번 ... 그들이 사용할 수있어 것입니다. 따라서 앞뒤로 전환하는 것이 문제가됩니다. 그래서 버튼을 다시 켜기 위해 모든 버튼을 복원 할 두 번째 기능을 추가했습니다.

Answer 2

if 문을 사용하여 버튼을 활성화/비활성화 할지를 결정할 수 있습니다. 당신이 사용하지 않도록 필요한 경우

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

는/ALL 버튼을 수 있도록, 당신은 당신이 이전에했던 것처럼 그들을 통해 당신이 찾고있는 요소와 루프를 찾기 위해 "getElementByTagName"을 할 수 있습니다.

편집 : 장애인 속성을 설정

element.removeAttribute("disabled"); 

이러한 방법으로 수행 할 수 있습니다 (모두 같은 결과를) 이전 post

적절한 방법에 따라 경찰 비활성화 속성이 있음을 제거하는

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

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

0123에

자바 스크립트 :

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

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