1

好的，我已经编写了一段时间的网站，这是我没有找到答案的第一个“无法克服”的问题，所以现在我转向你，专家。

在我的表单上，我有三个下拉菜单、一个文本框和一个禁用的复选框。我希望它能够工作，以便当用户从每个下拉菜单中选择一个选项并在文本框上写一些东西时，复选框就会启用。

当我一直在寻找解决方案时，我发现了这段代码，它与我的问题非常相似。但是，当我尝试添加另一个下拉菜单时，当我从第一个菜单中选择一个选项并完全忽略第二个菜单时，它仍然启用该按钮。对不起，我是 Jquery/JavaScript 的新手，我只是认为当两个菜单上的类名相同时它应该以这种方式工作（jQuery 类选择器：（'.dropdown'））。

我还发现了一个与 textboxes 类似的代码。我只是不知道如何组合这些代码，所以它会按照我想要的方式运行。

4

3 回答 3

1

我假设下拉菜单的默认值为 value="" 

   $('#form_submit_button').click(function(){  

        $('.checkbox').attr('disabled',true);
        var all_selected = true;

        $('.dropdown').each(function(){

             if(!$(this).val())
             {
                  all_selected = false; 
             }
        });


        if(!$('#text_box').text())
        {
           all_selected = false;
        }

        if(all_selected)
        {      
            $('.checkbox').attr('disabled',false);
        }       
  });
于 2012-08-25T02:06:26.910 回答
1

在这里看到它：http: //jsfiddle.net/JKmkL/109/

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        $('.required').each(function(){
            if(!$(this).val()){
                $('.myCheckBox').prop('disabled',true);
                done=false;
                return false;
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

required并为元素添加类。

编辑：

上面的代码假定默认<option>具有value="". 如果没有，您可以使用http://jsfiddle.net/JKmkL/114/

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true);
            done=false;
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
});

编辑2：

如果要在选中复选框时显示 div 并在禁用复选框时隐藏它，请使用

JavaScript：

$(document).ready(function() {
    $('.required').change(function() {
        var done=true;
        function quit(){
            $('.myCheckBox').prop('disabled',true).removeAttr('checked');
            done=false;
            $('#div2').addClass('hide');
            return false;
        }
        $('.required.dropdown').each(function(){
            if($(this).children(':selected').hasClass("disablenext")){
                return quit();
            }
        });
        $('.required[type=text]').each(function(){
            if(!$(this).val()){
                return quit();
            }
        });
        if(done){$('.myCheckBox').prop('disabled',false);}
    });
    $('.myCheckBox').click(function(){
        $('#div2')[(this.checked?'remove':'add')+'Class']('hide');
    });
});

CSS：

.hide{display:none}

在这里看到它：http: //jsfiddle.net/JKmkL/133/

于 2012-08-25T02:18:04.680 回答
0

首先，说三个下拉菜单的 id 被称为d1,d2和d3; 文本框是txt；和复选框是chk。然后，您可以定义一个函数来确定何时必须启用复选框：

function shouldEnableCheckbox() {
    var nonEmptyFields = $("#d1,#d2,#d3,#txt").filter(function() {
        return this.value;    
    });
    return nonEmptyFields.length == 4;
}

本质上，您选择所有 4 个元素，过滤那些非空的元素，并将生成的过滤数组与 4 进行比较。如果为真，则意味着您应该启用该复选框。

然后，将change事件处理程序分配给所有 4 个元素，调用前面的函数，并将结果分配给disabled复选框的属性：

$("#d1,#d2,#d3,#txt").change(function() {
    $("#chk").prop("disabled", !shouldEnableCheckbox());
});​

这是有效的DEMO和另一个有效的、更通用的DEMO，它使用类而不是 id 来标识所需的元素。

于 2012-08-25T02:18:11.590 回答