如果沒有選擇選項選項，則禁用「提交」按鈕

Question

我想在僅包含選擇下拉菜單的搜索表單上禁用「提交」按鈕。這裏有幾個類似的問題，但我其中大多數涉及領域。最接近我的情況是Disable submit button if all three of three specific dropdown fields are empty。我修改了JSFiddle中提供的解決方案，以提供一個空的選項，並且確實讓它工作 - 但只能在JSFiddle中，而不是在我的頁面上。

我用自擬的答案相同的代碼（僅改變的ID）：

$('#submit').attr('disabled','disabled'); 

$('select').change(function(){ 
    if ($(this).hasClass('require_one')){ 
     $('#submit').removeAttr('disabled'); 
    } 
}); 

$('#submit').click(function() { 
    $('#searchform').submit(); 
}); 

我添加了上面的代碼之後我包括的jquery.js（V 1.9.1）。 我動態生成的形式，但在我的jsfiddle使用的究竟是什麼在頁面的源代碼看出：http://jsfiddle.net/cheeseus/d5xz6aw8/8/

我不知道爲什麼我不能得到它的實際的頁面上工作，希望那些更有知識可以幫助梳理出來。

而且，如果可能的話，我還希望如果所有三個選擇都再次設置爲空值，則會再次禁用「提交」按鈕。

Answer 1

我通常不喜歡使用CSS選擇器的ID（3）因爲你只能有一個與該文檔名稱ID選擇，有可能具有相同的ID是另一種元素已。如何使用類層次結構來精確定位按鈕元素？ 在您需要重新檢查的次數，每次你對什麼是空選擇什麼無論如何：

var $submitButton=$('.selector .btn'); 
var $selectors=$('.selector select.require_one'); 
$submitButton.attr('disabled','disabled'); 

$('.selector select.require_one').change(function(){ 
    var $empty=$selectors.filter(function() { return this.value == ""; }); 
    if ($selectors.filter(function() { return this.value == ""; }).length == $selectors.length){ 
      $submitButton.attr('disabled','disabled');   
    } else 
    { 
     $submitButton.removeAttr('disabled'); 
    } 
}); 



$submitButton.click(function() { 
    $('#searchform').submit(); 
}); 

JSFiddle code here

Answer 2

您可以使用簡單的計數來查看是否應該顯示按鈕。這裏是jQuery代碼。

var count = 0; 
$('.require_one').change(function() { 
    count++; 
    if (count >= 3) { 
     $('#submit').removeAttr('disabled'); 
    } 
}); 

$('#submit').attr('disabled','disabled'); 

Answer 3

我想這是因爲你沒有檢查是您的文檔準備就緒。 我補充一些改進：

• 緩存jQuery對象的變量，讓你的代碼要快一些（你不看它每次選擇是beeing變化）。

• 使用結合事件的推薦辦法 - 「關於」功能

• 「已禁用」是在特定的變化使用

• 財產不是一個屬性，jQuery的有專門的方法 - 檢查所有的選擇，如果有是任何未選中的，它存在 - 將prop屬性設置爲true，否則設置爲false。

• 而不是在初始化時禁用提交，觸發您在選擇beeing更改時執行的相同操作（如果您在所有選擇初始狀態中選擇的選項開始將不會被禁用）。

$(document).ready(function() { 
    var $submit = $('#submit'); 
    var $selects = $('select.require_one'); 

    $submit.on("click", function() { 
     $('#searchform').submit(); 
    }); 

    $selects 
     .on("change", function(){ 
      var $not_selected = $selects.filter(function() { 
       return !$(this).val(); 
      }); 
      $submit.prop('disabled', $not_selected.length ? true : false); 
     }) 
     .first() 
     .triggerHandler('change');  
});