FromDateとToDateが選択されている場合に送信ボタンを有効にします。

Question

FromDateとToDateが選択されている場合、送信ボタンを有効にします。

私のケースでは、すべてのフォームが送信を許可するための入力です。 fromDateからのToDateが有効である必要があり、ボタンを提出するよりも、選択された場合に

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

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

私の要件があります。

Answer 1

てみバインドイベント提出：

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

をして削除disabled属性：

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

Answer 2

$('#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>

これは正常に動作しますが、）、あなたのコードは良かったが、$("form > input")すべての入力日付と名前を確認します;）

Answer 3

あなたは、ユーザの入力ボタン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')を使用してください。