jquery - Enable button only if start and end dates are not empty -
initially button
in disabled mode. when user selects both start , end dates should enabled download.
the below code enables button when start or end date selected. how enable download button when both inputs not empty applying class $('#btn_download').attr('class','btn-general');
?
//enable 'download' button if start-end dates not empty var enabledisablebtn = function(){ var startval = $('#datepicker_start').val().trim(); var endval = $('#datepicker_end').val().trim(); var disablebtn = startval.length == 0 || endval.length == 0; $('#btn_download').attr('disabled',disablebtn); $('#btn_download').attr('class','btn-general'); } $('#datepicker_start').datepicker({ enabledisablebtn(); }); $('#datepicker_end').datepicker({ enabledisablebtn(); });
<button class="btn-general disabled" id="btn_download" type="button"> <span class="glyphicon glyphicon-download-alt" style="margin-right:5px;"></span> download </button>
.btn-general { background-color: #6eb8d9; color: #fff; border: medium none; border-radius: 6px; cursor: pointer; display: inline-block; font-size: 15px; line-height: 1.4; padding: 6px 15px; text-align: center; vertical-align: middle; white-space: nowrap; } .btn-general.disabled { background-color: #5bc0de; color: #fff; pointer-events:none; cursor:not-allowed; opacity:0.40; }
use onclose option
called when datepicker closed, whether or not date selected.
script
var enabledisablebtn = function(){ var startval = $('#datepicker_start').val().trim(); var endval = $('#datepicker_end').val().trim(); var disablebtn = startval.length == 0 || endval.length == 0; $('#btn_download').prop('disabled',disablebtn).addclass('btn-general'); } //set onclose $('#datepicker_start, #datepicker_end').datepicker({ onclose : function(){ enabledisablebtn(); } }); //call enabledisablebtn();
Comments
Post a Comment