Question

我创建了两个复选框，并添加了条件以根据选择启用和禁用复选框和输入文本。

我的代码如下。

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>

的JavaScript

$(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);

  }
}

直播jsFiddle代码：

jsFiddle live code link here

我想做什么？

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

当某人“取消选中”“阿根廷”复选框，“messi”输入文字时，应禁用“ronaldo”输入文字，并启用“portugal”复选框。

当有人“检查”“葡萄牙”复选框，“messi”输入文本时，应启用“ronaldo”输入文本，并禁用“argentina”复选框。

因此用户只能看到“argentina”复选框和“portugal”复选框，并可以查看。

我试图让它发挥作用，但一直困扰着条件。

Answer 1

这应该像你想要的那样工作，只需删除杂乱的部分并添加干净的条件

check this fiddle

$("#sel_messi").attr("disabled", true);   $("#sel_ronaldo").attr("disabled", true);
    
      $("span#kra> span > input[type='checkbox']").click(enable_cb6);   $("span#unf> span > input[type='checkbox']").click(enable_cb7);
    
      function enable_cb6() {
        if (this.checked) {
          $("#sel_messi").attr("disabled", false);
          $("#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() {
        if (this.checked) {
          $("#sel_ronaldo").attr("disabled", false);
          $("#kra input[type='checkbox").attr("disabled", true);
        } else {
          $("#sel_messi").attr("disabled", true);
          $("#sel_ronaldo").attr("disabled", true);
          $("#kra input[type='checkbox").attr("disabled", false);
        }   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

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

您可以使用很多少JS来实现这一点，如下所示：

$(function() {
  // save a reference to both text inputs, and disable them to start:
  var textboxes = $("#sel_messi,#sel_ronaldo").prop("disabled", true);
  // select both checkboxes, and bind a click handler to them, also saving
  // a reference to both
  var cbs = $("#kra,#unf").find("input[type='checkbox']").click(function() {
    // set disable state of other checkbox according to this one's checked state:
    cbs.not(this).prop("disabled", this.checked);
    // set disable state of textboxes based on second checkbox's checked state:
    textboxes.prop("disabled", !cbs.get(1).checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

在更新的小提琴中：http://jsfiddle.net/aq3kwcd1/3/

但至于您的代码出了什么问题：enable_cb7()函数在引用#unf时引用#kra，并在其else情况下引用它正在启用文本框时应该禁用它们。

您不需要两个文档就绪处理程序，也不需要从就绪处理程序中调用enable_cb6()或enable_cb7()。您只需要一个就绪处理程序来绑定两个复选框单击处理程序并设置文本框的初始禁用状态和第二个复选框。

所以这里有一个更整洁的函数版本：

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

  $("#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() {
  if (this.checked) {
    $("#sel_messi").attr("disabled", false);
    $("#sel_ronaldo").attr("disabled", false);
    $("#kra input[type='checkbox").attr("disabled", true);
  } else {
    $("#sel_messi").attr("disabled", true);
    $("#sel_ronaldo").attr("disabled", true);
    $("#kra input[type='checkbox").attr("disabled", false);
  }
}

更新了小提琴：http://jsfiddle.net/aq3kwcd1/2/

条件复选框javascript无效

2 个答案: