Question

我正在使用Yii2应用程序，它有一个提交按钮，如下所示

<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">

当我点击该按钮时，它会被禁用并且文本会发生变化，如下所示

<button id="next" class="btn btn-primary btn-submit disabled" data-loading-text="Please wait, processing..." value="1" name="next" type="submit" disabled="disabled">Please wait, processing...</button>

现在我添加了一个带有必需属性的文本字段，如下所示

<input id="name" class="form-control" type="text"maxlength="255" required="required"  title="">

我的问题是，当我在文本字段为空时单击提交按钮时，它会显示该字段是必需的，但同时该按钮将被禁用。

如果文本字段为空，如何将此按钮恢复为原始启用状态？

Answer 1

您应该同时使用removeAttr('disabled')和removeClass('disabled')

尝试以下方法。

$name = $('#name');
$next = $('#next');
$next.on('click', function() {
  $(this).addClass('disabled').attr('disabled', 'disabled').text($(this).data('loading-text'));

  // Your work here

})

$name.on('input', function() {
  changeState($(this));
})
changeState($name);

function changeState(elem) {
  if (elem.val().trim().length) {
    $next.removeClass('disabled').removeAttr('disabled');
  } else {
    $next.addClass('disabled').attr('disabled', 'disabled').text('Next');
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="name" class="form-control" type="text" maxlength="255" required="required" title="">
<button id="next" class="btn btn-primary btn-submit " data-loading-text="Please wait, processing..." value="1" name="next" type="submit">Next</button>

单击时jquery更改按钮状态

1 个答案: