2012-08-09 1 views
0

2 개의 선택 목록 mySelect 및 mySelect2가 있습니다. 체크 상자를 클릭하면 하나가 선택되면 다른 하나는 동시에 변경됩니다. 당신이 값을 한 번에 변경이 제자리에 변경을 할 수 없도록 어떻게 비활성화 (회색으로) 할 ... mySelect2을jQuery, 값을 새 섹션에 저장하면 입력 사용 안 함

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript"> 

function displayResult() { 
    if(document.form1.billingtoo.checked == true) { 
     var x = document.getElementById("mySelect").selectedIndex; 
     // Set selected index for mySelect2 
     document.getElementById("mySelect2").selectedIndex = x; 
    } 
} 

</script> 
</head> 
<body> 

<form name="form1"> 
Select your favorite fruit: 
    <select id="mySelect"> 
     <option>Apple</option> 
     <option>Orange</option> 
     <option>Pineapple</option> 
     <option>Banana</option> 
    </select> 

    <br> 

    <input type="checkbox" name="billingtoo" onclick="displayResult()"> 

    <br> 

Select your favorite fruit 2: 
    <select id="mySelect2"> 
     <option>Apple</option> 
     <option>Orange</option> 
     <option>Pineapple</option> 
     <option>Banana</option> 
    </select> 

</form> 
</body> 
</html> 

:

아래 코드를 확인하십시오?

감사합니다.

답변

6

확실하지가 여전히 어떤 사용하지 않을 때 귀하의 질문은 "jQuery를"태그 이유 : 컨트롤을 다시 활성화 falsedisabled 다시 설정

// with "plain" JS: 
document.getElementById("mySelect2").disabled = true; 

// with jQuery 
$("#mySelect2").prop("disabled", true); 

어느 쪽이든을.

여기에 jQuery를 사용하여 기능을 재 작성하는 많은 방법 중 하나입니다 :

$(document).ready(function() { 
    // bind the checkbox click handler here, 
    // not in an inline onclick attribute: 
    $('input[name="billingtoo"]').click(function() { 
     var $mySelect2 = $("#mySelect2"); 
     // if checkbox is checked set the second select value to 
     // the same as the first 
     if (this.checked) 
      $mySelect2.val($("#mySelect").val()); 
     // disable or re-enable select according to state of checkbox: 
     $mySelect2.prop("disabled", this.checked); 
    }); 
}); 

데모 : http://jsfiddle.net/nnnnnn/99TsC/

+0

어떻게 상자가 JS 버전을 사용을 선택하지 않으면 다시 할 수 있습니까? – avidaicu

+0

위에서 말한 것처럼'disabled' 속성을'false'로 다시 설정하십시오 : document.getElementById ("mySelect2"). disabled = false;' – nnnnnn