Question

我有一个脚本，检查两个文本字段是否为空时它会自动提交。它从localstorage中选择变量并将它们放在文本字段中。

if (localEmail != null && localPwd != null) {


     $('#form1').submit();

  }

我还有一个脚本，当所有文本字段都没有填充时，它会禁用提交按钮。

$(document).ready(function (){
var $input = $('#form1 input:text'),
    $register = $('#button_id');    
$register.attr('disabled', true);

$input.keyup(function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });

    trigger ? $register.button('disable') : $register.button('enable');

});

});

现在我的问题是当页面加载第二次及以后的时间并且textfields中的localstorage中有变量时，提交按钮仍然保持禁用状态并且自动提交失败。现在我希望按钮在变量中保持活动状态，以便自动提交

Answer 1

在文档准备就绪时，请对输入值进行额外检查并禁用按钮

$(document).ready(function () {
    var $input = $('#form1 input:text'),
        $register = $('#button_id');

    $input.each(function () {
        if (!$(this).val()) {
            $register.attr('disabled', true);
            return false;
        }
    });
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });

        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');

    });
});

$(document).ready(function () {
    var $input = $('#form1 input:text'),
        $register = $('#button_id');

    $input.each(function () {
        if (!$(this).val()) {
            $register.attr('disabled', true);
            return false;
        }
    });
    $input.keyup(function () {
        var trigger = false;
        $input.each(function () {
            if (!$(this).val()) {
                trigger = true;
            }
        });

        trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');

    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="form1">
    <input type="text" />
    <input type="text" />
    <button id="button_id">button</button>
</form>

Answer 2

这应该有效

  $input.each(function() {
    if (!$(this).val()) {
        trigger = true;
    }

在文件就绪功能下。

＆＃13;

$(document).ready(function (){
  
 var $input = $('#form1 input:text');
 $register = $('#button_id');   
   $register.prop('disabled', true);
  //$register.attr('disabled', true);
  
   $('#button_id').on('click',function(){alert('hi');});
  
  function checkInputs(){  
   
         $input.each(function(e) { 
            if (!$(this).val().length < 1) {
                      trigger = true;
                           } else  
                                {trigger = false;}
              });
       trigger ? $register.prop('disabled',false) : $register.prop('disabled',true);
   }
checkInputs();
$('#form1 input:text').on('keyup',function(){checkInputs();});


  



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1">
<input/>
<input />
<button type="button" id="button_id" >Submit</button>
  </form>

＆＃13;

Answer 3

您未达到所需行为的原因是因为您只是在从输入元素触发disabled事件时更新按钮的change属性，页面加载时默认不会触发。

因此解决方案是将涉及更新按钮状态的功能移动到一个单独的状态，我们将在运行时调用（例如DOM就绪），然后在change事件被触发时再次调用感兴趣的元素：

var updateButton = function() {
    var trigger = false;
    $input.each(function() {
        if (!$(this).val()) {
            trigger = true;
        }
    });

    trigger ? $register.button('disable') : $register.button('enable');
};

// Update button status on DOM ready
updateButton();

// Update button status on keyup
$input.keyup(updateButton);

另外，在处理二进制属性时请使用.prop()：

$register.prop('disabled', true);

在textfields中有文本时使提交按钮处于活动状态 - jquery

3 个答案: