jquery:重置后禁用/启用按钮不起作用

Posted

技术标签:

【中文标题】jquery:重置后禁用/启用按钮不起作用【英文标题】:jquery: Disable/Enable button not working after reset 【发布时间】:2012-05-29 06:01:16 【问题描述】:

我有一个表单,其中包含 n 个单选按钮(使用 jquery-ui)。在允许用户提交表单之前,我想确保所有问题都已得到解答。我在执行此验证时遇到了两个问题:

在初始加载时,提交按钮不会响应单击或鼠标悬停,直到所有问题都根据需要选择了响应。但是,它似乎仍然是可点击的(我希望它淡出)

如果按下重置按钮,提交按钮会淡出(根据需要),但一旦表单完成,我将无法重新启用提交按钮。

这是我第一次使用 javascipt/jquery。出了什么问题?如何在这两种情况下实现所需的功能?


这里是相关的 javascript 部分:

$(document).ready(function()
    $( '.button' ).button ();
    $( '.radio-set' ).buttonset ();
    $( 'input[type="submit"]' ).attr( 'disabled', true );

    var progress = 0;
    var total_fields = $('.response').length

    /* Track Progress function*/
    $('input[type="radio"]').click( function()        
      progress = $('input[type="radio"]:checked').length
      $(".progressbar").progressbar( value: ( progress / total_fields ) * 100 )
      console.log(progress, total_fields)
      if( progress == total_fields )
        console.log( "Hello from inside the conditional" )
        $( 'input[type="submit"]' ).removeAttr( 'disabled' );
       
    );

    $( 'input[type="reset"]' ).click( function()
      progress = 0
      $( ".progressbar" ).progressbar( value: 0 )
      $( 'input[type="submit"]' ).attr( 'disabled', true );
    );
);

表格中的一个问题示例(带有培根填充文本):

        <div class="model_feature">
          <span class="feature_name" title="M1">M1</span>
          <span class="response radio-set">
            <label for="M1-1">1</label>
            <input type="radio" name="M1" id="M1-1" value="1"  class="feature-input" autocomplete="off" />
            <label for="M1-0">0</label>
            <input type="radio" name="M1" id="M1-0" value="0"  class="feature-input" autocomplete="off" />
            <label for="M1-Unk">Unknown</label>
            <input type="radio" name="M1" id="M1-Unk" value="Unknown"  class="feature-input" autocomplete="off" />
          </span <!-- close response -->
          <span class="feature_description">Chicken spare ribs capicola beef brisket hamburger. Kielbasa filet mignon tail ribeye ball tip ground round.</span>
        </div> <!-- close model_feature -->

输入和重置按钮的完整性:

        <input type="reset" class="button" id="reset-button" />
        <input type="submit" class="button" id="submit-button" disabled="disabled" />

【问题讨论】:

【参考方案1】:

当您将按钮转换为 jQuery UI 按钮时,您最好使用 Button 插件的 jQuery UI 方法来启用/禁用您的按钮,而不是直接更改 DOMElement 属性disabled

    对于初始状态,您初始化 Button,然后仅更改 disabled 属性,因此 Button 插件会考虑更改。

    // either disable first the button then initialize
    $( 'input[type="submit"]' ).attr( 'disabled', true );
    $( '.button' ).button ();
    

    // set the Button's option
    $( '.button' ).button ();
    $( 'input[type="submit"]' ).button('option', 'disabled', true);
    

    对于第二个问题,使用 Button 的选项设置器重新启用您的按钮:

    $( 'input[type="submit"]' ).button('option', 'disabled', false);
    

【讨论】:

【参考方案2】:

我在添加disabled 属性之前等待一段时间解决了这个问题。例如,

var btn = $("button").first();
$(btn).button("loading");
$(btn).button("reset");
setTimeout(function () 
    $(btn).prop("disabled", true);
, 0);

一个同样的问题here 和一个gihub 问题here。

【讨论】:

以上是关于jquery:重置后禁用/启用按钮不起作用的主要内容,如果未能解决你的问题,请参考以下文章

reactjs通过一个不起作用的功能启用禁用按钮

启用/禁用表单提交按钮不起作用

Javascript 隐藏/显示部分在重置时不起作用

字段启用禁用javascript不起作用

禁用文本框后 JQuery UI 自动完成功能不起作用

启用禁用的输入类型图像不起作用