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

Disable Submit button if none of selector options is selected

本文关键字：提交 按钮 选择 任何 选择器 选项 如果      更新时间：2023-09-26

我想在只包含选择下拉列表的搜索表单上禁用"提交"按钮。这里有几个类似的问题，但我大多数都涉及领域。如果三个特定的下拉字段中的三个都为空，那么最接近我的情况是禁用提交按钮。我修改了JSFiddle中提供的解决方案，使其具有一个空选项，并使其发挥了作用——但仅在JSFiddl中，而不是在我的页面上。

我使用与建议答案相同的代码（仅更改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/

我不知道为什么我不能把它放在实际的页面上，希望那些更有知识的人能帮助解决这个问题。

如果可能的话，如果所有三个选择都再次设置为空值，我还希望再次禁用"提交"按钮。

我通常不喜欢使用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代码此处

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

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

我认为这是因为您没有检查文档是否准备好。我添加了一些改进：

  • 将jquery对象缓存在变量中，可以使您的代码更快（您不需要在每次选择发生更改时都查找它）。

  • 使用了推荐的绑定事件的方式-"on"功能

  • "disabled"是属性而不是属性，jQuery有专用的方法来使用

  • 在select change-check all select时，如果有任何未选中的选项，则将其设置为-set prop disabled为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');    
});
相关文章：