使用 jQuery 验证复选框和输入文本值答案

【问题标题】：Using jQuery to validate checkboxes and input text values使用 jQuery 验证复选框和输入文本值
【发布时间】：2016-10-07 18:05:48
【问题描述】：

我需要你的帮助，

有没有一种方法可以在启用按钮之前使用功能强大的 jQuery 来验证以下条件？

如果用户在文本框中输入一个值，然后选中其中一个复选框，则启用该按钮
如果用户在文本中已有值，然后选中其中一个复选框，则启用按钮

如何用 jQuery 编写，从我的角度来看，这将是一些冗长的表单字段检查否？

这是 HTML 标记：

<!DOCTYPE html>

<html>
  <head>
  </head>
  <body>
    <input type="button" value="Add To Calendar" disabled>
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date1">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date2">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date3">
  </body>
</html>

【问题讨论】：

是的，jQuery - 以及纯 JavaScript - 绝对可以做到这一点。你在哪里卡住了，你走了多远，出了什么问题，如何“出错了”？

标签： javascript jquery html checkbox

【解决方案1】：

这可能会让您入门。您可以根据需要使字段验证变得复杂或简单。

$('input[type=checkbox]').click(function(){
   var tmp = $(this).next('input').val();
   //validate tmp, for example:
   if (tmp.length > 1){
     //alert('Text field has a value');
     $('#mybutt').prop('disabled',false);
   }else{ 
     //alert('Please provide a long value in text field');
     $('#mybutt').prop('disabled', true);
     $(this).prop('checked',false);
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <input id="mybutt" type="button" value="Add To Calendar" disabled>
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date1">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date2">
    <br>
    <input type="checkbox" name="dategroup"><input type="text" id="date3">

【讨论】：

@mmcrae 不，我不认为是这样......我在示例中使用了该 ID，它通常会带着笑容结束。怀疑是因为我回答了一个OP自己没有尝试过的问题。 不过，我不在乎，因为我自己曾经去过那里并且记得很清楚。

【解决方案2】：

试试这个方法..

$('input').on('change input', function() {
  $input = $('input');
  $button = $('input[type="button"]');
  var arr = [];
  $input.each(function() {
    if ($(this).attr('type') !== 'button') {
      arr.push(check($(this)));
      arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
    }
  })
})

function check(elem) {
  if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
  if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
  return false;
}

$('input').on('change input', function() {
  $input = $('input');
  $button = $('input[type="button"]');
  var arr = [];
  $input.each(function() {
    if ($(this).attr('type') !== 'button') {
      arr.push(check($(this)));
      arr.indexOf(false) == -1 ? $button.removeAttr('disabled') : $button.attr('disabled', 'disabled');
    }
  })
})

function check(elem) {
  if ($(elem).attr('type') == 'checkbox' && $(elem).is(':checked')) return true;
  if ($(elem).attr('type') == 'text' && $(elem).val().trim().length) return true;
  return false;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" value="Add To Calendar" disabled>
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date1">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date2">
<br>
<input type="checkbox" name="dategroup">
<input type="text" id="date3">

【讨论】：