如果没有选择选项选项，则禁用“提交”按钮

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');  
});