Question

我使用子类来执行单击父表单的提交。我会尝试启用/禁用按钮。我试过这种方式，但即使我删除了dinamically子类操作提交仍然有效

HTML

<form action="foo.php" method="post">
   <div id="btn_src" class="bttn sub">CLICK ME</div>
</form>

CSS

.bttn {
   width: 100px;
   border: 1px solid #ccc;
   text-align: center;
}

.sub {
   background: red;
}

.disabled {
   background: grey;
}

JS

$('.bttn.sub').on('click', function() {
  var form = $(this).closest('form');
  $(form).submit();
});

var disab_btn = function() {
  $('#btn_src').removeClass('sub').addClass('disabled');
  alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
  $('#btn_src').removeClass('disabled').addClass('sub');
  alert($('#btn_src').attr('class'));
}

disab_btn();

然后我尝试从html中删除子类，但在这种情况下，始终禁用提交操作。

<form action="foo.php" method="post">
    <div id="btn_src" class="bttn">CLICK ME</div>
</form>

JSFIDDLE

我该怎么办？感谢

Answer 1

$('.bttn.sub').on('click', function() {
  var btn = $(this),
    form = btn.closest('form');
  if (!btn.hasClass('disabled')) {//<-- added this line
    form.submit();
  }
});

var disab_btn = function() {
  $('#btn_src').removeClass('sub').addClass('disabled');
  alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
  $('#btn_src').removeClass('disabled').addClass('sub');
  alert($('#btn_src').attr('class'));
}

disab_btn();

.bttn {
  width: 100px;
  border: 1px solid #ccc;
  text-align: center;
}
.sub {
  background: red;
}
.disabled {
  background: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="foo.php" method="post">
  <div id="btn_src" class="bttn sub">CLICK ME</div>
</form>

Answer 2

Fiddle Demo

如果尚未完成，请将文档中的代码包装好。第二，你不能像你试过的那样使用类作为选择器。选择表单，然后给出操作，要查找的类和函数。

$( document ).ready(function() {
$('form').on('click','.bttn.sub',function() {
    alert("Clicked");
    var form = $(this).closest('form');
    $(form).submit();
});

var disab_btn = function() {
    $('#btn_src').removeClass('sub').addClass('disabled');
    //alert($('#btn_src').attr('class'));
}

var enab_btn = function() {
    $('#btn_src').removeClass('disabled').addClass('sub');
    //alert($('#btn_src').attr('class'));
}

enab_btn();
});

作为替代方案，您只需按ID选择按钮：

 $('#btn_src').on('click', function() {
    alert("Clicked");
    var form = $(this).closest('form');
    $(form).submit();
});

Fiddle here

Answer 3

主要问题是当您提交表单时，整个页面会刷新，然后一切从头开始。因此，您必须尝试使用Ajax发布数据，以避免刷新整个页面。

Jquery-启用/禁用表单提交

3 个答案: