选择所有日期范围选择器后启用按钮

Question

我有两个单日期日期范围选择器。我有一个按钮被禁用了。我只想在两者都由日期填充后才启用它。否则必须禁用。

这是我的代码：

let arr = ['one', 'two'];
arr.forEach(iv=>{
$(`#${iv}.input_value`).daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
autoApply: true,
}, function(the_date) {
$(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
$('#submit_data').removeAttr('disabled');
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>

现在，它在填充其中一个日期字段之后立即启用。有没有办法我可以启用只有两个字段都被填充的按钮？

Answer 1

添加一个对象来存储日期，检查是否有两个日期

let arr = ['one', 'two'];
let dates = {};
arr.forEach(iv=>{
$(`#${iv}.input_value`).daterangepicker({
singleDatePicker: true,
showDropdowns: true,
autoUpdateInput: false,
autoApply: true,
}, function(the_date) {
$(`#${iv}.input_value`).val(the_date.format('MMM DD, YYYY'));
dates[iv] = the_date;
if (Object.keys(dates).length > 1) {
$('#submit_data').removeAttr('disabled');
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<input type='text' id='one' class='input_value' autocomplete='off' />
<input type='text' id='two' class='input_value' autocomplete='off' />
<button id='submit_data' type='submit' disabled>Submit</button>

或者你可以用检查两个输入

if ($('#one').val() && $('#two').val()) {
$('#submit_data').removeAttr('disabled');
}