javascript - 如果 textarea 为空，则防止选中其他复选框

Question

一个带有一些textareas和一个sumbit按钮的表单都被禁用了，每个textarea旁边都有一个复选框。

选中复选框时:

1- 一条消息显示(你不应该让激活的文本区域为空)

2- 提交按钮保持禁用状态

3- 开始编写消息时隐藏并启用按钮。

当复选框未选中时:

1-消息隐藏

2-如果有文本则清除与之相关的textarea

三键返回禁用

到目前为止，我的以下代码一切都很完美。 现在，如果已经有一个已经用空 textarea 选中的复选框，我如何才能防止选中其他复选框？ 逻辑是，如果启用了文本区域，则它必须接收文本。

//handling checkbox
$('input:checkbox').change(function() {
  if ($(this).prop('checked')) {
    $(".textareaalert").text("Don't let this activated textarea empty");
    $(".textareaalert").slideDown("slow");
    $("#submit").prop("disabled", true);
  } else {
    $(".textareaalert").slideUp("slow");
    $("#submit").prop("disabled", true);
    $("textarea").val('');

  }
});
//handling textarea
$("textarea").keyup(function() {
  var textareaLength = $(this).val().length;
  if (textareaLength == 0) {
    $(".textareaalert").text("Don't let this activated textarea empty");
    $(".textareaalert").slideDown("slow");
    $("#submit").prop("disabled", true);
  } else {
    $(".textareaalert").slideUp("slow");
    $("#submit").prop("disabled", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textareaalert" style="display:none"></div>
<form class="horizontal">
  <div class="form-group">
    <label>Infancia</label>
    <div class="col-md-9">
      <textarea class="form-control" id="infancia" disabled></textarea>
    </div>
    <div class="col-md-2">
      <input type="checkbox"> <label>Activo</label>
    </div>
  </div>
  // more text area below
</form>

Answer 1

您可以使用 $('input:checkbox:checked') 和 filter() 方法添加检查 checkbox 更改事件查找是否有任何选中的 checkbox 和空的 textarea。如果有，则不允许选中 checkbox。

$('input:checkbox').change(function() {
  if ($(this).prop('checked')) {
    
    //check is there any checked checkbox with empty textarea
    var length = $('input:checkbox:checked').not(this).filter(function() {
      return !$(this).closest('.form-group').find('textarea').val();
    }).length;

    //don't allow the checkbox to be checked
    if (length > 0) {
      $(this).prop('checked', false);
      return;
    }

    $(".textareaalert").text("Don't let this activated textarea empty");
    $(".textareaalert").slideDown("slow");
    $("#submit").prop("disabled", true);
  } else {
    $(".textareaalert").slideUp("slow");
    $("#submit").prop("disabled", true);
    $("textarea").val('');
  }
});

$("textarea").keyup(function() {
  var textareaLength = $(this).val().length;
  if (textareaLength == 0) {
    $(".textareaalert").text("Don't let this activated textarea empty");
    $(".textareaalert").slideDown("slow");
    $("#submit").prop("disabled", true);
  } else {
    $(".textareaalert").slideUp("slow");
    $("#submit").prop("disabled", false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textareaalert" style="display:none"></div>
<form class="horizontal">
  <div class="form-group">
    <label>Infancia</label>
    <div class="col-md-9">
      <textarea class="form-control" id="infancia"></textarea>
    </div>
    <div class="col-md-2">
      <input type="checkbox">
      <label>Activo</label>
    </div>
  </div>
  <div class="form-group">
    <label>Infancia</label>
    <div class="col-md-9">
      <textarea class="form-control" id="infancia"></textarea>
    </div>
    <div class="col-md-2">
      <input type="checkbox">
      <label>Activo</label>
    </div>
  </div>

  <input id="submit" type="submit" disabled/>
</form>