JavaScript〜當選擇第三個復選框時，我需要禁用2個復選框

Question

選擇復選框1和2時，我需要復選框3來禁用它。 當我在第三個復選框標簽中包含onClick ，該代碼有效，但是我的首席程序員希望在上面的JavaScript代碼中具有onClick 。 我對JS不太滿意，所以我不知道為什么它不起作用。 這是我到目前為止的內容：

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

Answer 1

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

Answer 2

由於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>

由於我當前正在運行Linux，因此這可能不是IE安全的。 如果它在IE中不起作用，則問題出在切換功能內部。

Answer 3

我的方法適用於Fabian，我會做類似的事情，因為在這三個復選框的框周圍有一個div ，稱為“多對多”，它將尋找（parent <lable> ）節點（parent <DIV> ）節點。第三個復選框，然后找到childNodes（復選框）

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

 }

JavaScript〜當選擇第三個復選框時，我需要禁用2個復選框

問題描述

3 個解決方案

解決方案1
1 2011-10-26 14:05:55

解決方案2
0 2011-10-26 14:35:23

解決方案3
0 2011-10-26 17:07:43

JavaScript〜當選擇第三個復選框時，我需要禁用2個復選框

問題描述

3 個解決方案

解決方案1 1 2011-10-26 14:05:55

解決方案2 0 2011-10-26 14:35:23

解決方案3 0 2011-10-26 17:07:43

解決方案1
1 2011-10-26 14:05:55

解決方案2
0 2011-10-26 14:35:23

解決方案3
0 2011-10-26 17:07:43