启用具有不同元素的复选框

Enabling checkbox with different elements

本文关键字：元素 复选框 启用      更新时间：2023-09-26

好吧，我已经为一个网站编写了一段时间的代码，这是我找不到的第一个"无法克服"的问题，所以现在我求助于你们，专家们。

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

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

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

请在此处查看：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/

我假设下拉列表的默认值是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);
        }       
  });

首先，假设三个下拉列表的id分别称为d1、d2和d3；文本框为txt；复选框为CCD_ 8。然后，您可以定义一个函数来确定何时必须启用复选框：

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

基本上，您可以选择所有4个元素，过滤那些非空的元素，并将得到的过滤数组与4进行比较。如果为true，则表示您应该启用该复选框。

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

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

这是正在工作的DEMO和另一个正在工作的、更通用的DEMO它使用类而不是id来识别所需的元素。

相关文章：