当前位置： 文江博客话题详情

JavaScript ~ 当选中第三个复选框时，我需要禁用 2 个复选框

发布于 2024-12-11 18:12:14 字数 1994 浏览 0 评论 0原文

我需要 checkBox 3 来禁用 checkBox 1 & 2 当它被选择时。 当我在第三个复选框标记中有 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>
原文

I need checkBox 3 to disable checkBox 1 & 2 when it is selected.
The code works when I have the onClick in the 3rd checkbox tag, but my lead programmer wants the onClick in the JavaScript code above. I'm not that good with JS so I don't know exactly why it's not working. This is what I have so far:

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

一个人的旅程 2024-12-18 18:12:14

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

jQuery makes event handlers a piece of cake:

$('#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});
    }
});
回复 原文
メ斷腸人バ 2024-12-18 18:12:14

我的方法与 Fabian 的方法相反，我会做这样的事情，因为你在那些名为多对多的三个复选框块周围有一个 div ，这将查找 (parent < ;lable>) 节点（父

） 第三个复选框，然后找到 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;
   }

 }

My approach apposed to Fabian's, I would do some thing like this, as you have a div around around those block of three checkboxs called many-from-many this will look for the (parent <lable>) nodes (parent <DIV>) of the third check box and then find the 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;
   }

 }
回复 原文
最笨的告白 2024-12-18 18:12:14

由于 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 中不起作用，则问题将出在切换功能内部。

As Eric's solution is using jQuery, here is a pure JavaScript alternative:

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

This might not be IE safe as I am currently running Linux. If it doesn't work in IE, the problem will be inside the toggle function.

回复 原文
~没有更多了~

关于作者

冷心人i

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘世孤行

文章 0 评论 0

烟─花易冷

文章 0 评论 0

你是年少的欢喜

文章 0 评论 0

倒带

文章 0 评论 0

忱杏

文章 0 评论 0

送君千里

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文