Question

我希望在填充某些字段时启用按钮。

目前正在使用jquery .change方法：

$('#Balance, #Period').change(function() {
   var balance = $('#Balance').val();
   var period = $('Period').val;

   if (balance != "" & period != "") {
      $('#btnNext').attr('disabled', false);
   } else {
      $('#btnNext').attr('disabled', true);
}

但这仅在用户输入内容时有效，我希望在所有字段都有数据时（即：在页面加载时）发生这种情况。

Answer 1

“更改”事件仅在数据更新时触发，因此不会在页面加载时触发。要做到这一点，您需要手动触发事件。即

$('#Balance, #Period').change(function() {
   var balance = $('#Balance').val();
   var period = $('Period').val;

   if (balance != "" & period != "") {
      $('#btnNext').attr('disabled', false);
   } else {
      $('#btnNext').attr('disabled', true);
   }
}

$(function(){
    $('#Balance, #Period').trigger('change'); 
    // fire the change even when doc ready
});

或者将主代码作为一个单独的函数并调用它。

$('#Balance, #Period').change(updateThings);

function updateThings(){
    var balance = $('#Balance').val();
       var period = $('Period').val;

       if (balance != "" & period != "") {
          $('#btnNext').attr('disabled', false);
       } else {
          $('#btnNext').attr('disabled', true);
       }
}

$(function(){
    updateThings();
});

Answer 2

您应该将您启动的代码置于单独的函数中，并在绑定更改之前调用它。触发其他更改可能会导致其他事情启动（如果您已在这些元素的某处绑定了其他更改）。所以看起来应该是这样的：

$(function() {
    var $balance = $('#Balance');
    var $period  = $('#Period');
    var $btn     = $('#btnNext');

    var updateBtn = function updateBtn() {
        var isEnabled = $balance.val() && $period.val();
        $btn.attr('disabled', !isEnabled);
    };

    updateBtn();
    $balance.add($period).on('change', updateBtn);
});

JQuery .change事件仅在输入数据时触发，但如果字段已预加载则不会触发

2 个答案: