Jquery-启用/禁用表单提交

Question

我使用子类来执行单击提交父窗体。 我会尝试启用/禁用按钮dinamically。 我试图以这种方式，但即使我删除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

包裹里面的文件代码准备，如果没有这样做。 2你不能像你尝试使用类作为选择器。选择表单，然后给出操作，要查找的类和函数。

$(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发布数据以避免刷新整个页面。