많은 텍스트 입력 필드와 확인란이있는 양식이 있습니다. 확인란을 선택할 때마다 모든 텍스트 입력 필드와 다른 모든 확인란 (선택한 항목 제외)을 비활성화해야합니다. 이 확인란의 선택을 취소하면 비활성화 된 모든 필드를 다시 활성화해야합니다. 이것은 다음 코드에서 작동합니다 (처음 3 줄만 표시됨).
<form id="myForm">
Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll();" />
<input type="text" id="id1" name="name1" /><br>
Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll();" />
<input type="text" id="id2" name="name2" /><br>
Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll();" />
<input type="text" id="id3" name="name3" /><br>
</form>
function enableDisableAll() {
cb1 = document.getElementById('checkboxOne').checked;
cb2 = document.getElementById('checkboxTwo').checked;
cb3 = document.getElementById('checkboxThree').checked;
document.getElementById('checkboxOne').disabled = (cb2 || cb3);
document.getElementById('id1').disabled = (cb1 || cb2 || cb3);
document.getElementById('checkboxTwo').disabled = (cb1 || cb3);
document.getElementById('id2').disabled = (cb1 || cb2 || cb3);
document.getElementById('checkboxThree').disabled = (cb1 || cb2);
document.getElementById('id3').disabled = (cb1 || cb2 || cb3);
}
코드가 많은 확인란 (cb1 || cb2 || cb3 || ....... cb (n))과 혼동되기 때문에 더 우아한 가능성이 있는지 궁금합니다. 예 :
function enableDisableAll () {
cb1 = document.getElementById('checkboxOne').checked;
cb2 = document.getElementById('checkboxTwo').checked;
cb3 = document.getElementById('checkboxThree').checked;
var cb_array = [];
cb_array.push("cb1");
cb_array.push("cb2");
var cb_array_imploded = cb_array.join(" || ");
document.getElementById('id1').disabled = (cb_array_imploded);
불행히도 이것은 작동하지 않습니다.
누구든지 내 문제에 대한 간단한 해결책이 있습니까?
모든 양식 요소를 선택하고 클릭 한 요소 ID와 동일한 ID를 반복하고 확인합니다.
function enableDisableAll(e) {
var own = e;
var form = document.getElementById("myForm");
var elements = form.elements;
for (var i = 0 ; i < elements.length ; i++) {
if(own !== elements[i] ){
if(own.checked == true){
elements[i].disabled = true;
}else{
elements[i].disabled = false;
}
}
}
}
function clearAll(){
document.getElementById("myForm").reset();
}<form id="myForm">
Checkbox 1: <input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableAll(this);" />
<input type="text" id="id1" name="name1" /><br>
Checkbox 2: <input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableAll(this);" />
<input type="text" id="id2" name="name2" /><br>
Checkbox 3: <input type="checkbox" name="checkbox3" id="checkboxThree" onclick="enableDisableAll(this);" />
<input type="text" id="id3" name="name3" /><br>
</form>
<input class="field button2" type="button" value="Clear form" size="10" onclick="clearAll(this);">업데이트 : 모든 양식 필드를 지우려면
document.getElementById("myForm").reset();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다