在jquery中禁用并启用提交按钮

时间:2022-11-23 17:00:00

I am using jquery to disable the submit button and load loading image,

我正在使用jquery来禁用提交按钮并加载加载图像,

In submit button I am using the folowing :

在提交按钮我正在使用下面的内容:

<div id="registerbtn" name="registerbtn">
<input type="submit" class="btn btn-primary" icon="ok white" value="Register" id="register" name="register"/>
</div>
<div class="span4" style="display:none;" id="loadingtext">
                            <?php echo  $imghtml=CHtml::image('images/loading.gif');?>                      
                        </div>

and in JQuery, I am using following code :

在JQuery中,我使用以下代码:

$(document).ready(function() {

    $('#register').click(function() {
        $('input[type="submit"]').attr('disabled','disabled');

     });
        $("#loadingtext").show();
    });
});

When I do this, then this button is disabled permanently, but if I want to remove then what should I do ??

当我这样做,然后永久禁用此按钮,但如果我想删除那么我该怎么办?

4 个解决方案

#1


15  

Use .prop() method and use the $(this) to reference the target element within the callback function

使用.prop()方法并使用$(this)引用回调函数中的目标元素

jQuery(function($) {

  const $register = $("#register"),
        $loading = $("#loading");

  $register.on("click", function() {
  
    $(this).prop('disabled', true);
    $loading.show();
    
    setTimeout(function() {
      $register.prop('disabled', false);
      $loading.hide();
    }, 2000);

  });

});
<input id="register" value="Register" type="submit">
<div id="loading" style="display:none;">Wait 2 sec...</div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

#2


7  

This is answered in the jQuery FAQ

这在jQuery FAQ中得到了解答

How do I disable/enable a form element?
There are two ways to disable/enable form elements.

如何禁用/启用表单元素?有两种方法可以禁用/启用表单元素。

Set the 'disabled' attribute to true or false:

将'disabled'属性设置为true或false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Add or remove the 'disabled' attribute:

添加或删除“已禁用”属性:

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

Update: Now the way to do it (as said by FAQ) is only:

更新:现在这样做的方式(如常见问题所述)仅限于:

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

#3


0  

To permanently remove the button

要永久删除按钮

$('#register').remove();

To restore the button

要恢复按钮

$('#register').attr('disabled',false);

#4


0  

Is $('#divID').remove(); what you're looking for?

是$('#divID')。remove();你在找什么?

http://docs.jquery.com/Manipulation/remove

#1


15  

Use .prop() method and use the $(this) to reference the target element within the callback function

使用.prop()方法并使用$(this)引用回调函数中的目标元素

jQuery(function($) {

  const $register = $("#register"),
        $loading = $("#loading");

  $register.on("click", function() {
  
    $(this).prop('disabled', true);
    $loading.show();
    
    setTimeout(function() {
      $register.prop('disabled', false);
      $loading.hide();
    }, 2000);

  });

});
<input id="register" value="Register" type="submit">
<div id="loading" style="display:none;">Wait 2 sec...</div>


<script src="//code.jquery.com/jquery-3.1.0.js"></script>

#2


7  

This is answered in the jQuery FAQ

这在jQuery FAQ中得到了解答

How do I disable/enable a form element?
There are two ways to disable/enable form elements.

如何禁用/启用表单元素?有两种方法可以禁用/启用表单元素。

Set the 'disabled' attribute to true or false:

将'disabled'属性设置为true或false:

 // Disable #x
 $('#x').attr('disabled', true);
 // Enable #x
 $('#x').attr('disabled', false);

Add or remove the 'disabled' attribute:

添加或删除“已禁用”属性:

 // Disable #x
 $("#x").attr('disabled', 'disabled');
 // Enable #x
 $("#x").removeAttr('disabled');

Update: Now the way to do it (as said by FAQ) is only:

更新:现在这样做的方式(如常见问题所述)仅限于:

// Disable #x
$( "#x" ).prop( "disabled", true );

// Enable #x
$( "#x" ).prop( "disabled", false );

#3


0  

To permanently remove the button

要永久删除按钮

$('#register').remove();

To restore the button

要恢复按钮

$('#register').attr('disabled',false);

#4


0  

Is $('#divID').remove(); what you're looking for?

是$('#divID')。remove();你在找什么?

http://docs.jquery.com/Manipulation/remove