Question

我有一个表单，其中有多个选择问题作为单选按钮实现（使用jquery-ui）。我想确保在允许用户提交表单之前已经回答了所有问题。我在执行此验证时遇到两个问题：

在初始加载时，提交按钮不响应点击或鼠标悬停，直到所有问题都根据需要选择了响应。但是，它似乎仍然是可点击的（我希望这可以消失）

enter image description here

如果按下重置按钮，提交按钮会淡出（根据需要），但在表单完成后我无法重新启用提交按钮。

enter image description here

这是我第一次使用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" />

Answer 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);

对于第二个问题，请使用按钮的选项设置器重新启用按钮：
```
$( 'input[type="submit"]' ).button('option', 'disabled', false);
```

Answer 2

我在添加disabled属性之前等了一会儿才解决了这个问题。例如，

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

同样如此问题here和gihub问题here。

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

2 个答案: