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

您可以使用简单的计数来查看是否应该显示按钮。这是jQuery代码。

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

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

Answer 2

我通常不喜欢将ID（3）用于CSS选择器，因为在文档中只能有一个具有该名称的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 3

我认为这是因为你没有检查你的文件准备好了。我添加了一些改进：

在变量中缓存jquery对象，使你的代码更快一点（每次选择都不会发生变化时你都不会寻找它。）
使用推荐的绑定事件方式 - ＆＃39; on＆＃39;功能
＆＃39;禁用＆＃39;属性不是属性，jQuery有专用方法使用
选择更改 - 选中所有选择是否有任何未选中，有 - 将prop prop设为true，否则设为false。
而不是在初始化时禁用提交，触发当您选择更改时执行的相同操作（如果您选择在所有选择的初始状态中选择的选项将被禁用）。

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

如果未选择任何选择器选项，请禁用“提交”按钮

3 个答案: