我想用Jquery使用禁用和啓用的功能

Question

當我在我的文本框中寫入x1並按下按鈕時，會發生警報。因爲已使用優惠券，所以在關閉提醒後，文本框和按鈕變爲禁用狀態

我附加刪除優惠券文本到附近，當我單擊刪除優惠券文本時，文本框和按鈕變爲啓用。但是，當我第二次單擊該按鈕時，它會附加到第二次刪除優惠券文本附近。當我刪除刪除優惠券並啓用它時，我該如何申請一次又一次的流程？

這是我的代碼和演示;

<input type="text" id="couponInput" class="couponInput" placeholder="Coupon code" />             
<button type="button" id="couponApply" class="couponApply">APPLY COUPON</button>       
<span class="removeCoupon"></span> 

$(document).ready(function(){ 
    $('.couponApply').click(function(event){ 
     var couponInputval = $(".couponInput").val(); 

     if(couponInputval == "x1"){ 
      alert('Coupon Applied!'); 
      $(".removeCoupon").append("Remove Coupon"); 
      $(".couponInput, .couponApply").attr('disabled','disabled');   

      $('.removeCoupon').click(function(){ 
      $(".couponInput, .couponApply").removeAttr('disabled','disabled');    
      }); 
     } 
     else{ 
     alert('Error'); 
     } 
     event.preventDefault(); 
    }); 
    }); 

http://jsfiddle.net/509yp6k0/

Answer 1

試試這個

$('.removeCoupon').on('click', function(){ 
    $(".couponInput, .couponApply").removeAttr('disabled', 'disabled'); 
    $(this).empty(); 
}); 

Answer 2

如果我明白你的要求，你只需要在去除優惠券，除去從span的Remove coupon文本。您可以使用empty()做到這一點：

$('.removeCoupon').click(function() { 
    $(".couponInput, .couponApply").prop('disabled', false); 
    $(this).empty(); 
}); 

Updated fiddle