JavaScript〜當第三個複選框被選中時，我需要禁用2個複選框

我需要checkBox 3來禁用複選框1 & 2當它被選中時。當我在第3個複選框標記中有onClick時，該代碼有效，但我的首席程序員希望在上面的JavaScript代碼中使用onClick。我對JS不太好，所以我不知道它爲什麼不起作用。這是我到目前爲止有：JavaScript〜當第三個複選框被選中時，我需要禁用2個複選框

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="Content-Script-Type" content="text/javascript"> 
<meta name="Content-Style-Type" content="text/css"> 
<title>Example</title> 

<SCRIPT TYPE="text/javascript"> 
<!-- 

var field = document.getElementById("check_1157"); 
if (field) 
{ 
    function update1157Box(contactMethod) 
    { 
    var contactMethod = document.getElementById("check_1157"); 

    if(contactMethod.check_1157.checked) 
    { 
     //enable the not to receive information 
     contactMethod.check_1156.disabled =true; 
     contactMethod.check_1156.checked = false; 
     contactMethod.check_1158.disabled =true; 
     contactMethod.check_1158.checked = false; 
     return; 
    } 
    } 

    field.onClick = update1157Box(this.form) 

    //the not to receive information 
    contactMethod.check_1156.checked = false; 
    contactMethod.check_1156.disabled = false; 
    contactMethod.check_1158.checked = false; 
    contactMethod.check_1158.disabled = false; 
} 

//--> 
</SCRIPT> 

</head> 
<body> 

<form> 
    <div class="many-from-many"> 
    <label style="display: block;"><input id="check_1156" 
    name="answers[166][]" value="1156" type="checkbox">Check Box 1</label> 
    <label style="display: block;"><input id="check_1158" 
    name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label> 
    <label style="display: block;"><input id="check_1157" 
    name="answers[166][]" value="1157" type="checkbox">Check Box 3</label> 
    </div> 
</form> 
</body> 
</html>

來源

2011-10-26 Mike Nacci

如果單擊複選框3禁用1和2，您將如何改變主意並選擇1或2？ – Eric

jQuery讓事件處理程序是小菜一碟：

$('#check_1157').click(function() { 
    if ($(this).prop('checked')) { 
     $('#check_1156, #check_1158').prop({ 
      checked: false, 
      disabled: true 
     }); 
    } else { 
     $('#check_1156, #check_1158').prop({disabled: false}); 
    } 
});

來源

2011-10-26 14:05:55 Eric

由於Eric的解決方案是使用jQuery，這裏是一個純JavaScript替代：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="Content-Script-Type" content="text/javascript"> 
<meta name="Content-Style-Type" content="text/css"> 
<title>Example</title> 

<SCRIPT TYPE="text/javascript"> 
<!-- 

var toggle_list = ['check_1156', 'check_1158']; 


function toggle(checkbox) { 
    if (checkbox.disabled) { 
     checkbox.removeAttribute('disabled'); 
    } else { 
     checkbox.setAttribute('disabled', true); 
    } 
} 

function toggleActivation() { 
    for (var i=0; i<toggle_list.length; i++) { 
     var id = toggle_list[i]; 
     var checkbox = document.getElementById(id); 
     toggle(checkbox); 
    } 
} 

//--> 
</SCRIPT> 

</head> 
<body> 

<form> 
    <div class="many-from-many"> 
    <label style="display: block;"><input id="check_1156" 
    name="answers[166][]" value="1156" type="checkbox">Check Box 1</label> 
    <label style="display: block;"><input id="check_1158" 
    name="answers[166][]" value="1158" type="checkbox"> Check Box 2</label> 
    <label style="display: block;"><input id="check_1157" 
    name="answers[166][]" value="1157" type="checkbox" onchange="toggleActivation()">Check Box 3</label> 
    </div> 
</form> 
</body> 
</html>

這可能不是IE安全的，因爲我目前正在運行Linux。如果它在IE中不起作用，問題將出現在切換功能中。

來源

2011-10-26 14:35:23 Fabian

你的答案很好，你只需要將事件處理從'onchange'更改爲'onclick' – david

@david爲什麼？我原本以爲'onchange'也會包含空格鍵，但至少在Firefox'onclick'中都適用。它似乎並沒有真正有所作爲。爲什麼我需要使用'onclick'？ – Fabian

@david我的錯誤，在Windows IE6只onchange沒有工作 – david

我的做法並列於Fabian的，我會做一些這樣的事，因爲你有一個div各地叫到身邊很多 - 從 - 許多這將尋找（父<lable>）節點三個checkboxs那些塊（父<DIV>）第三複選框，然後找到的childNodes（checkboxs）

<form> 
    <div class="many-from-many"><label style="display: block;"><input id="check_1156"name="answers[166][]" value="1156" type="checkbox">Check Box 1</label><label style="display: block;"><input id="check_1158"name="answers[166][]" value="1158" type="checkbox">Check Box 2</label><label style="display: block;"><input id="check_1157"name="answers[166][]" value="1157" type="checkbox" onclick="togTopTwo(this)">Check Box 3</label></div> 
</form>

。

function togTopTwo(c){ 
    var mm = c.parentNode.parentNode; 
    var xx = mm.firstChild.firstChild; 
    var secondOfMany = xx.parentNode.nextSibling.firstChild; 

    if(c.checked){ 
     xx.disabled=true; 
     secondOfMany.disabled = true; 
    }else{ 
     xx.disabled=false; 
     secondOfMany.disabled =false; 
    } 

}

來源

2011-10-26 17:07:43 david

JavaScript〜當第三個複選框被選中時，我需要禁用2個複選框

回答

相關問題