Question

最初我的button处于禁用模式。当用户仅选择开始日期和结束日期时，应启用它以进行下载。

以下代码仅在选择开始日期或结束日期时启用按钮。如果通过应用课程$('#btn_download').attr('class','btn-general');

两个输入都不为空，我怎么能启用下载按钮？

//enable 'Download' button only if Start-End dates are 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;
}

Answer 1

使用onClose选项

关闭日期选择器时调用，是否选择了日期。

脚本

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 up onClose
$('#datepicker_start, #datepicker_end').datepicker({
    onClose : function(){
         enableDisableBtn();
    }
});

//Call initially
enableDisableBtn();

Answer 2

您可以使用addClass和removeClass功能根据disableBtn变量的值禁用/启用按钮。

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);
    if(disableBtn) 
      $('#btn_download').addClass('disabled');
    else
      $('#btn_download').removeClass('disabled');
}

$('#datepicker_start, #datepicker_end').on('change blur',function(){
   enableDisableBtn();
});

Answer 3

一些替代版本。假设您稍后需要这些值，您可以在检查时存储它们。并重复使用这些设置值来启用/禁用按钮和获取值。正如建议使用onClose，否则不会捕获直接在文本框中键入/粘贴的值。

从开始到结束，代码将类似于：

var pickers = $('#datepicker_start, #datepicker_end' );
pickers.datepicker({
    onClose: function(){              
        this.Date = $(this).datepicker("getDate");             
        $('#btn_download').toggleClass('disabled', pickers.filter(function(){return this.Date != null;}).length < 2);
            }
        });

Fiddle

禁用的类在具有Date值的所有选择器的手上切换（每当选择器关闭时填充该值）。

仅在开始日期和结束日期不为空时启用按钮

3 个答案: