Question

我需要你的帮助，

有没有办法可以在启用按钮之前使用所有如此强大的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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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">

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

2 个答案: