jQuery禁用/啓用提交按鈕

我有這個HTML：

<input type="text" name="textField" />
<input type="submit" value="send" />

我該如何作這樣的事情：

• 當文本字段爲空時，應禁用提交（disabled =「 disabled」）。
• 在文本字段中鍵入內容以刪除禁用的屬性時。
• 若是文本字段再次變爲空（刪除了文本），則應再次禁用提交按鈕。

我嘗試過這樣的事情：

$(document).ready(function(){
    $('input[type="submit"]').attr('disabled','disabled');
    $('input[type="text"]').change(function(){
        if($(this).val != ''){
            $('input[type="submit"]').removeAttr('disabled');
        }
    });
});

…但這不起做用。 有任何想法嗎？

---

#1樓

這是文件輸入字段的解決方案。

要在未選擇文件時禁用文件字段的提交按鈕，而後在用戶選擇要上傳的文件後啓用：

$(document).ready(function(){
    $("#submitButtonId").attr("disabled", "disabled");
    $("#fileFieldId").change(function(){
        $("#submitButtonId").removeAttr("disabled");
    });
});

HTML：

<%= form_tag your_method_path, :multipart => true do %><%= file_field_tag :file, :accept => "text/csv", :id => "fileFieldId" %><%= submit_tag "Upload", :id => "submitButtonId" %><% end %>

---

#2樓

$(function() {
  $(":text").keypress(check_submit).each(function() {
    check_submit();
  });
});

function check_submit() {
  if ($(this).val().length == 0) {
    $(":submit").attr("disabled", true);
  } else {
    $(":submit").removeAttr("disabled");
  }
}

---

#3樓

問題在於，僅當焦點從輸入移開時，更改事件纔會觸發（例如，有人單擊了輸入或將選項卡移出了輸入）。 嘗試改用keyup：

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

---

#4樓

或者對於不喜歡在每件事上使用jQ的咱們：

document.getElementById("submitButtonId").disabled = true;

---

#5樓

您也可使用相似這樣的東西：

$(document).ready(function() {
    $('input[type="submit"]').attr('disabled', true);
    $('input[type="text"]').on('keyup',function() {
        if($(this).val() != '') {
            $('input[type="submit"]').attr('disabled' , false);
        }else{
            $('input[type="submit"]').attr('disabled' , true);
        }
    });
});

這是現場的例子