いくつかの入力が空でない場合にのみ「行の追加」リンクを使用できるようにするテーブルに取り組んでいます。私はこれを適応させました(入力フィールドが入力されるまで送信ボタンを無効にします)が、私の場合、私の日付ピッカー(jQuery UIの日付ピッカー)入力は空の場合でも値を持ちます。値が指定されているかどうかに関係なく、datepicker が自動的に値を POST していることをどこかで読みました。これは私の機能の目的を無効にします。
ここに私のマークアップがあります:
<tbody>
<tr>
<td class="date"><input class="datepicker" name="date-01" value="" /></td>
<td class="hours"><input class="hours" name="hours-01" value="" /></td>
<td class="rate"><input class="rate" name="rate-01" value="60.00" /></td>
<td class="date-total"><input class="date-total" name="date-total-01" value="" /></td>
<td class="add-delete-row">
<a href="#" class="delete-row" title="Delete row">Delete</a>
<a href="#" class="add-row" title="Add a row">Add Row</a>
</td>
</tr>
</tbody>
...そして関連するjs:
// 1. Datepicker options/format:
$('.datepicker').datepicker( {
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
}); // END Datepicker
checkRow();
$('.hours-table').on('blur', 'input', checkRow); // same results using either keyup or change; apparently empty datepicker input has a value
});
function checkRow() {
//if ( $('input.datepicker').not(':empty') &&
if ( $('input.datepicker').val().length > 0 &&
$('input.hours').val().length > 0 &&
$('input.rate').val().length > 0 &&
$('input.date-total').val().length > 0 ) {
$('.add-row').show();
alert ($('input.datepicker').val());
}
else {
$('.add-row').hide();
}
}
私はjsfiddle(jsfiddle http://jsfiddle.net/sheckyvansheck/4HPfe/27/)をセットアップしましたが、datepickerを機能させることができず、もちろん価値がありません。
どんな提案でも大歓迎です。
乾杯、svs