2012-06-20 2 views
10

내 페이지에는 두 개의 다른 버튼이 있습니다. 페이지가로드 될 때 둘 다 활성화되도록하고 싶지만 사용자가 하나를 클릭하면 다른 버튼을 비활성화하고 싶습니다. 하지만 다른 버튼을 클릭하는 경우 다른 비활성화 된 버튼을 사용하면서 해당 버튼을 사용 중지 할 수도 있습니다. 버튼 onclick을 사용 중지 할 수 있었지만 다른 버튼을 다시 사용하도록 설정하는 데 문제가 있습니다. 다음은이 페이지에있는 두 개의 버튼입니다. 그들은 단지 페이지에있는 형식이 아닙니다.버튼을 클릭하지 않고 다른 버튼을 사용 가능하게 설정하십시오.

<button onclick="down7913.disabled=false" type="submit" class="positive" name="up7913"><img src="check.png" alt=""/></button> 

<button onclick="this.disabled=true" type="submit" class="negative" name="down7913"><img src="cross.png" alt=""/></button> 
+0

jQuery에 문제가 없다면 솔루션을 제공 할 수 있습니다. – asprin

+2

http://jsfiddle.net/mowglisanu/2jBtV/ – Musa

+0

감사합니다. 무사 ... 댓글 대신 답변을 추가 할 수 있었습니까? – austinhollis

답변

22

확인이 코드는, 당신의 맛과 작업에있어 : ​​

<button onclick="document.getElementById('up7913').disabled=true;document.getElementById('down7913').disabled=false;" type="submit" class="positive" name="up7913" id="up7913">First</button> 

<button onclick="this.disabled=true;document.getElementById('up7913').disabled=false;" type="submit" class="negative" name="down7913" id="down7913">Second</button> 
3

를 작성해야 기능 :

function disablefirstbutton() { 
    document.getElementById("firstbutton").disabled = true; 
    document.getElementById("secondbutton").disabled = false; 
} 

function disablesecondbutton() { 
    document.getElementById("secondbutton").disabled = true; 
    document.getElementById("firstbutton").disabled = false; 
} 

<button id="firstbutton" onclick="disablefirstbutton()"> 
<button id="secondbutton" onclick="disablesecondbutton()"> 
0

당신은 같은 것을 시도해 볼 수도 있습니다 : 자바 스크립트 순수하고 document.getElementsByClassName('negative') 반환에게 모든 클래스의 array을 유의하시기 바랍니다

onclick="document.getElementsByClassName('negative')[0].disabled=false" 

합니다. 하나만 있다면, 내가 쓴 것처럼 작동 할 것입니다. 그렇지 않다면 ID를 추가하고 document.getElementById('buttonId').disabled=false을 사용하십시오.

1

당신이 jQuery를 사용하여 괜찮다면, 여기있다!

$(function() { 
    $('button').click(function() { 
     var classname = $(this).attr('class'); 

     if(classname == 'positive') 
     { 
      $('button.positive').attr('disabled', 'disabled'); 
      $('button.negative').attr('disabled', false); 
     } 
     else 
     { 
      $('button.negative').attr('disabled', 'disabled'); 
      $('button.positive').attr('disabled', false); 
     } 
    }); 
}); 
관련 문제