jquery：重置后禁用/启用按钮不工作 [英] jquery: Disable/Enable button not working after reset

问题描述

我有一个有单选按钮（使用 jquery-ui ）实现的n个选择题的表单。我希望确保在允许用户提交表单之前所有问题都已得到解答。在执行此验证时，我遇到了两个问题：

• 在初始加载时，提交按钮不响应点击或鼠标悬停直到所有问题根据需要选择响应。然而，它似乎仍然是可点击的（我想这会淡化）。
i.stack.imgur.com/nGabF.pngalt =在这里输入图片描述>





• 如果按下重置按钮，提交按钮淡出（根据需要），但一旦完成表单，我就无法重新启用提交按钮。
>




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





---





以下是相关的javascript部分：


$ b $

  $（document）.ready（function（）{
 $（'.button'）.button（）; 
 $ （'.radio-set'）.buttonset（）; 
 $（'input [type =submit]'）.attr（'disabled'，true）; 
 
 var progress = 0; 
 var total_fields = $（'。response'）。length 
 $ b $ * / * Track Progress函数* / 
 $（'input [type =radio]' ）.click（function（）{
 progress = $（'input [type =radio]：checked'）。length $ b $（。progressbar）。progressbar（{value： / total_fields）* 100}）
 console.log（progress，total_fields）
 if（progress == total_fields）{
 console.log（您好来自条件内部）
 $（'input [type =submit]'）.removeAttr（'disabled'）; 
} 
}）; 
 
 $（'input [type =重启]' ） .click（function（）{
 progress = 0 
 $（.progressbar）.progressbar（{value：0}）
 $（'input [type =submit]' ）.attr（'disabled'，true）; 
}）; 
}）; 
  

表单中的其中一个问题（带有培根填充文本）的示例：

 < div class =model_feature> 
< span class =feature_nametitle =M1> M1< / span> 
< span class =response radio-set> 
< label for =M1-1> 1< / label> 
< input type =radioname =M1id =M1-1value =1class =feature-inputautocomplete =off/> 
< label for =M1-0> 0< / label> 
< input type =radioname =M1id =M1-0value =0class =feature-inputautocomplete =off/> 
< label for =M1-Unk>未知< / label> 
< input type =radioname =M1id =M1-Unkvalue =Unknownclass =feature-inputautocomplete =off/> 
< / span<！ -  close response  - > 
< span class =feature_description>鸡排骨capicola牛腩汉堡包。 Kielbasa菲力牛排尾巴ribeye球尖地轮。< / span> 
< / div> <！ -  close model_feature  - > 
  

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



 < input type =resetclass =buttonid =reset-button/> 
< input type =submitclass =buttonid =submit-buttondisabled =disabled/> 
  




解决方案

当您将按钮变成jQuery UI Button时，您最好使用Button插件的jQuery UI方法来启用/取消您的按钮，而不是直接更改DOMElement属性 disabled 。




1. 对于初始状态，初始化您的Button，然后仅更改 disabled 属性，更改由Button插件考虑。

     //先禁用按钮然后初始化
    $（' input [type =submit]'）.attr（'disabled'，true）; 
    $（'.button'）.button（）; 
     

   或

     //设置Button的选项
    $（'.button'）.button（）; 
   '（'input [type =submit]'）.button（'option'，'disabled'，true）; 
     




2. 对于第二个问题，使用Button的选项设置器来重新启用按钮： / p>
   
   

     $（'input [type =submit]'）.button（'option'，'disabled'，false）; 
     







I have a form with n multiple choice questions implemented as radio buttons (using jquery-ui). I would like to ensure that all the questions have been answered before allowing the user to submit the form. I am running into two issues while performing this validation:

• On initial load, the submit button does not respond to clicks or mouseovers until all questions have a response selected as desired. However, it still appears to be clickable (I would like this to be faded out)
• If the reset button is pressed, the submit button is faded out (as desired) but I am unable to re-enable the submit button once the form has been completed.

This is my first time using javascipt/jquery. What is going wrong? How do I achieve the desired functionality across both cases?

---

Here is the pertinent javascript portion:

$(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 );
    });
});

Example of one of the questions within the form (with bacon filler text):

        <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 and Reset buttons for completeness:

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

解决方案

As you turn you button to a jQuery UI Button, you'd better use the jQuery UI methods of the Button plugin to enable/disbale your button, instead of the changing directly the DOMElement attribute disabled.

1. For the initial state, you initialize your Button and then only change the disabled attribute, so the change is taken into account by the Button plugin.

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

   or

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

2. For the second problem, use the Button's option setter to re-enable your button:

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

这篇关于jquery：重置后禁用/启用按钮不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！