我想在 Jquery 中使用禁用和启用功能

Question

当我在我的文本框中写入 x1 并按下按钮时，会出现警报。因为优惠券已经被使用，在我关闭警报后，文本框和按钮被禁用

我将删除优惠券文本附加到它附近，当我单击删除优惠券文本时，文本框和按钮将被启用。但是，当我第二次单击该按钮时，它会第二次附加到 Remove Coupon 文本的附近。当我移除 Remove Coupon 并启用它时，如何反复应用该过程？

这是我的代码和演示；

<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

如果我理解您的问题，您只需在删除优惠券时从 span 中删除 Remove coupon 文本即可。您可以使用 empty():

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

Updated fiddle

Answer 2

试试这个

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

我想在 Jquery 中使用禁用和启用功能

I want to use disabled and enabled function with Jquery

html

javascript

jquery

frontend

web