条件复选框javascript不工作

我创建了两个复选框，并添加了启用和禁用复选框以及基于选择输入文本的条件

我的代码如下

HTML

<div class="row">
  <div class="col1">messi</div>
  <div class="col2"><span class="wpcf7-form-control-wrap messi">
    <input type="text" name="messi" value="" size="40" class="wpcf7-form-control wpcf7-text" id="sel_messi" aria-invalid="false">
    </span></div>
  <div class="col34"><span class="wpcf7-form-control-wrap argentina"><span class="wpcf7-form-control wpcf7-checkbox" id="kra"><span class="wpcf7-list-item first last">
    <input type="checkbox" name="argentina[]" value="argentina">
    <span class="wpcf7-list-item-label">argentina</span></span></span></span></div>
</div>
&nbsp;
<div class="row">
  <div class="col1">ronaldo</div>
  <div class="col2"><span class="wpcf7-form-control-wrap ronaldo">
    <input type="text" name="ronaldo" value="" size="40" class="wpcf7-form-control wpcf7-text" id="sel_ronaldo" aria-invalid="false">
    </span></div>
  <div class="col34"><span class="wpcf7-form-control-wrap portugal"><span class="wpcf7-form-control wpcf7-checkbox" id="unf"><span class="wpcf7-list-item first last">
    <input type="checkbox" name="portugal[]" value="portugal">
    <span class="wpcf7-list-item-label">portugal</span></span></span></span></div>
</div>

实时JSFIDLE代码：

我想做什么？

默认情况下，“梅西”输入文本和“罗纳尔多”输入文本被冻结。当有人选中“阿根廷”复选框时，“梅西”输入文本、“罗纳尔多”输入文本和“葡萄牙”复选框应被禁用

当有人“取消选中”“阿根廷”复选框，“梅西”输入文本，“罗纳尔多”输入文本应被禁用，“葡萄牙”复选框应被启用

当有人选中“葡萄牙”复选框，“梅西”输入文本，“罗纳尔多”输入文本应被启用，“阿根廷”复选框应被禁用

因此，用户只能看到“阿根廷”复选框和“葡萄牙”复选框，并且可以选中其中任何一个

---

我曾试图让它工作，但一直坚持使用条件。

第一个复选框禁用两个文本框，第二个复选框启用两个文本框，这似乎是一个奇怪的要求，但问题清楚地表明要这样做，所以

您可以使用更少的JS实现这一点，如下所示：

$（函数（）{
//保存对两个文本输入的引用，并禁用它们以启动：
var textboxs=$（“塞尔梅西”、“塞尔罗纳尔多”）.prop（“残疾”，真）；
//选中这两个复选框，并将单击处理程序绑定到它们，同时保存
//两者都有
var cbs=$（“#kra，#unf”）。查找（“输入[type='checkbox']”）。单击（函数（）{
//根据此复选框的选中状态设置其他复选框的禁用状态：
cbs.not（this.prop）（“disabled”，this.checked）；
//根据第二个复选框的选中状态设置文本框的禁用状态：
textboxs.prop（“禁用”、！cbs.get（1）.选中）；
});
});

梅西
阿根廷
罗纳尔多
葡萄牙
这应该可以像您所希望的那样工作，只需去除脏乱的部分并添加清洁条件即可



$（“sel#u mesi”）.attr（“disabled”，true）$（“sel#u ronaldo”）.attr（“残疾”，真实）；
$（“span#kra>span>input[type='checkbox']）。单击（启用cb6）$（#unf>span>input[type='checkbox']）。单击（启用#cb7）；
功能启用_cb6（）{
如果（选中此项）{
$（“sel#u mesi”）.attr（“disabled”，false）；
$（“#unf input[type='checkbox”）.attr（“disabled”，true）；
}否则{
$（“sel#u mesi”）.attr（“disabled”，true）；
$（“sel#u罗纳尔多”）.attr（“残疾”，真实）；
$（“#unf input[type='checkbox”）.attr（“disabled”，false）；
}   }
函数启用_cb7（）{
如果（选中此项）{
$（“sel#u罗纳尔多”）.attr（“残疾”，假）；
$（“#kra input[type='checkbox”）.attr（“disabled”，true）；
}否则{
$（“sel#u mesi”）.attr（“disabled”，true）；
$（“sel#u罗纳尔多”）.attr（“残疾”，真实）；
$（“kra输入[type='checkbox”）.attr（“禁用”，false）；
}}

梅西
阿根廷
罗纳尔多
葡萄牙
如果能给我一个否决票的理由，我将不胜感激。我没有粘贴“代码垃圾”但是我尝试过的代码的一部分没有工作。太棒了。它工作得很完美。非常感谢：）+1，答案被接受了。没问题。请注意，在你接受它之后，我更新了答案，包含了一个更短的五行解决方案。我检查了它，它也很漂亮，只是我的答案是现有大系统的一小部分，因此，我会坚持下去，但学习聪明的做事方法很好。我会记住这一点，以备将来之用。再次感谢。谢谢你的回答。+1感谢你的努力
$(function() {
  enable_cb6();
  $("span#kra> span > input[type='checkbox']").click(enable_cb6);

  $("#sel_messi").attr("disabled", true);
  $("#sel_ronaldo").attr("disabled", true);
  $("#unf input[type='checkbox").attr("disabled", false);

});

function enable_cb6() {
  if (this.checked) {
  $("#sel_messi").attr("disabled", true);
  $("#sel_ronaldo").attr("disabled", true);
  $("#unf input[type='checkbox").attr("disabled", true);

  } else {
  $("#sel_messi").attr("disabled", true);
  $("#sel_ronaldo").attr("disabled", true);
  $("#unf input[type='checkbox").attr("disabled", false);

  }
}
/////
$(function() {
  enable_cb7();
  $("span#unf> span > input[type='checkbox']").click(enable_cb7);

  $("#sel_messi").attr("disabled", false);
  $("#sel_ronaldo").attr("disabled", false);
  $("#kra input[type='checkbox").attr("disabled", false);

});

function enable_cb7() {
  if (this.checked) {
  $("#sel_messi").attr("disabled", false);
  $("#sel_ronaldo").attr("disabled", false);
  $("#unf input[type='checkbox").attr("disabled", true);

  } else {
  $("#sel_messi").attr("disabled", false);
  $("#sel_ronaldo").attr("disabled", false);
  $("#unf input[type='checkbox").attr("disabled", false);

  }
}