當FromDate和ToDate被選中時啓用提交按鈕

Question

我想在選擇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>

我的要求是，當沒有fromdate和todate比提交按鈕應該是能夠選擇的。

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')。