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發佈數據以避免刷新整個頁面。