禁用提交按鈕，如果與jQuery輸入爲空

我試圖禁用提交按鈕，直到用戶填寫了表單中的輸入字段。禁用提交按鈕，如果與jQuery輸入爲空

我發現THIS線程在這裏有一個非常好的答案。我在填寫字段時讓提交按鈕重新啓用只是一個小問題。

有人可以看看這個功能，並幫助我找出我失蹤的東西嗎？任何幫助將不勝感激：D 謝謝。

$(document).ready(function() { 
var $submit = $("input[type=submit]"); 

if ($("input:empty").length > 0) { 
$submit.attr("disabled","disabled"); 
} else { 
$submit.removeAttr("disabled"); 
} 
}); 


<form method="POST" action="<%=request.ServerVariables("SCRIPT_NAME")%>"> 
User Name: <input name="Username" type="text" size="14" maxlength="14" /><br /> 
Password: <input name="last_name" type="password" size="14" maxlength="14"><br /> 
<input type="submit" value="Login" name="Submit" id="loggy"> 
</form>

來源

2012-07-14 xxstevenxo

$(document).ready(function() { 
    var $submit = $("input[type=submit]"), 
     $inputs = $('input[type=text], input[type=password]'); 

    function checkEmpty() { 

     // filter over the empty inputs 

     return $inputs.filter(function() { 
      return !$.trim(this.value); 
     }).length === 0; 
    } 

    $inputs.on('blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).blur(); // trigger an initial blur 
});

Working sample

而是模糊的，你還可以用像KEYUP：

$inputs.on('keyup', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).keyup(); // trigger an initial keyup

您也可以將多個事件：

$inputs.on('keyup blur', function() { 
     $submit.prop("disabled", !checkEmpty()); 
    }).keyup(); // trigger any one

來源

2012-07-14 09:54:50 thecodeparadox

非常感謝！那奇妙地工作：D有可能改變模糊？所以用戶不必點擊輸入以便禁用被刪除？ – xxstevenxo 2012-07-14 09:58:51

@xxstevenxo yup，看我的更新。你也可以用keyup做 – thecodeparadox 2012-07-14 09:59:48

沒關係，我把'模糊'改成'按鍵'，並得到了我期待的確切結果。非常感謝您的幫助和演示！：D – xxstevenxo 2012-07-14 10:00:36

在你的問題中，我沒有看到你不斷檢查輸入狀態的代碼，我認爲問題在於。

您可以使用現場活動來做到這一點。使用您的代碼示例：

$(document).ready(function() { 
     var $submit = $("input[type=submit]"); 

     function checkSubmitState() 
     { 
      if ($("input:empty").length > 0) { 
      $submit.attr("disabled","disabled"); 
      } else { 
      $submit.removeAttr("disabled"); 
      } 
     } 

     // check the submit state on every change or blur event. 
     $("input").live("change blur", checkSubmitState); 
});

來源

2012-07-14 09:57:26 devundef

使用keyup事件運行狀況之前檢查值：

$(document).ready(function() { 
    $('input:text, input:password').keyup(function() { 
     if ($(this).val() !== "") { 
      $('input:submit').removeAttr('disabled'); 
     } else { 
      $('input:submit').attr('disabled', 'true'); 
     } 
    }); 
});

http://jsfiddle.net/tovic/He4Kv/23/

來源

2012-07-14 18:42:03

這裏的一些這些答案都是律過時因爲我正在尋找一個jQuery代碼片段。我測試了它們，由於我認爲不合適，它們似乎不能正常運行。

所以我做了我自己的，這裏是一個更新的工作方式（jQuery> = 3.0），例如監聽輸入事件。

var inp = $('[type=text]'), 
 
    btn = $('[type=button]') 
 
btn.prop('disabled',true) 
 

 
inp.on('input',() => { 
 
    var empty 
 
    inp.map(v => 
 
    !inp.eq(v).val() ? 
 
     empty = true : false 
 
) 
 
    btn.prop('disabled',empty || false) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<form> 
 
\t <input type=text><br> 
 
\t <input type=text><br> 
 
\t <input type=text><br> 
 
\t <input type=button value=Send> 
 
</form>

甲普通的JavaScript例子是here。

來源

2017-10-25 13:16:30 Thielicious

禁用提交按鈕，如果與jQuery輸入爲空

回答

相關問題