Question

我想在选择FromDate和ToDate时启用提交按钮。

在我的案例中，所有表格都填写了启用提交按钮。

＆＃13;

 $('#myform > input').on('input', function() {
   var empty = false;
   $('form > input, form > select').each(function() {
     if ($(this).val() == '') {
       empty = true;
     }
   });

   if (empty) {
     $('#register').attr('disabled', 'disabled');
   } else {
     $('#register').removeAttr('disabled');
   }
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
  Name
  <input type="text" id="" name="name" />
  <br/>
  <br/>From Date
  <input type="date" name="fdate" />
  <br/>
  <br/>To Date
  <input type="date" name="fdate" />
  <br/>
  <br/>

  <input type="submit" id="register" value="Register" disabled="disabled" />
</form>

＆＃13;

我的要求是选择FromDate和ToDate时应该启用提交按钮。

Answer 1

mvn package

$('#myform > input').on('input', function () {
        var empty = false;
        $('form > input[type=date], form > select').each(function () {
            if ($(this).val() == '') {
                empty = true;
            }
        });
        if (empty) {
            $('#register').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });

这很好用;），你的代码很好，但<form id="myform"> Name <input type="text" id="" name="name" /><br/><br/> From Date <input type="date" name="fdate1" /><br/><br/> To Date <input type="date" name="fdate2" /><br/><br/> <input type="submit" id="register" value="Register" disabled="disabled" /> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>></script>会检查每个输入日期和名称;）

Answer 2

每次用户输入或更改日期字段时，您都可以设置提交按钮disabled：

var $formInputsDate = $('#myform > input[type="date"]'),
    $submit = $('#register');

$formInputsDate.on('input change', function () {
  var isEmpty = false;
  $formInputsDate.each(function () {
    $(this).val() === '' && (isEmpty = true);
  });
  return isEmpty ? $submit.attr('disabled', 'disabled') : $submit.removeAttr('disabled');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myform">
  Name
  <input type="text" id="" name="name"><br><br>

  From Date
  <input type="date"  name="fdate1"><br><br>

  To Date
  <input type="date"  name="fdate2"><br><br>

  <input type="submit" id="register" value="Register" disabled="disabled">
</form>

请注意，您可以使用$('#myform > input')将事件处理函数附加到表单中的所有输入。

Answer 3

尝试绑定提交事件：

$('#myform').on('submit', function () {
    var empty = false;
    $('form > input, form > select').each(function () {
        if ($(this).val() == '') {
            empty = true;
        }
    });
    if (empty) {
        return false;
    }
});

并删除已禁用的属性：

<input type="submit" id="register" value="Register"/>

选择FromDate和ToDate时启用提交按钮

3 个答案: