使用复选框启用下拉选择，切换相关下拉和 DIV 可见性

Question

我有一个有趣的场景涉及使用复选框来启用下拉菜单。更改第一个下拉菜单的状态后，它应该启用第二个下拉菜单。在第二个下拉列表中进行选择后，它会切换 2 个隐藏 DIV 的可见性。如下图：

我有一个原型JSFIDDLE，我一直在研究，但脚本存在一些问题，例如：

1- 尽管下拉菜单包含“disabled”属性，只有在选中复选框后才应启用该属性，但仅当您单击复选框 2 时才有效次。这是脚本：

var $checkBox = $('#mondayTransfer'),
    $select = $('#mondayOptions');
$checkBox.on('change',function(e){
    if ($(this).is(':checked')){
        $select.removeAttr('disabled');
    }else{
       $select.attr('disabled','disabled');
    }
});

2- 第二个选择下拉菜单也应该被禁用；对第一个选择下拉列表的更改将启用它。这是脚本：

$(function(){
    $('select').change(function(){
        if($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default'){
            $('select').not(this).prop('disabled', true).val('Disabled');
        } else {
           $('select').not(this).removeProp('disabled');
           $('select option').removeProp('disabled');
           $('select').each(function(){
               var val = $(this).val();
                if(val != 'Default' || val != 'Disabled'){
                    $('select option[value="'+val+'"]').not(this).prop('disabled', true);
                }
            });
        }
    });

});

3-取消选中复选框后，所有下拉菜单都应禁用。

我将不胜感激。

Answer 1

我稍微重构了你的代码，你可以测试一下here

let $checkBox = $('#mondayTransfer');

let divClasses = ['.ach', '.flash'];    
let selects = ['#mondayOptions', '#box_g2'];    

let setDisplayNone = function(className) {
  divClasses.forEach(function(className) {
    $(className).css("display", 'none');
  });
}

$checkBox.on('change',function(e){
    if ($(this).is(':checked')){
        $('#mondayOptions').removeAttr('disabled');
    } else {
        // Disable both selects when mondayOptions is CHECKED
        $('select').attr('disabled','disabled');

        // Loop through each div you can select and set its display none
        setDisplayNone(divClasses)
        
        // Loop each select you have and then select the "selected" option
        selects.forEach(function(className) {
            $(className).val('selected');
        });
    }
});

$(document).ready(function() {
  // When mondayOption is changed enable the second drop-down
  $("#mondayOptions").change(function() {
    $("#box_g2").attr("disabled", false)
  });
  
  // When the second drop-down changes its value
  $("#box_g2").change(function() {
    // set display none to all toggleDiv
    setDisplayNone(divClasses)

    // fetch the value selected
    let className = $(this).val();

    // use jquery to select the div and set the display yo block
    $('.' + className).css('display', 'block')
  });
});

如果您从 sn-p 的 //Enable 下拉选择部分中删除所有代码，您将获得您想要的部分行为。

不管怎样，它现在是这样工作的：

当复选框选中时：

1. 启用第一个下拉菜单。

当复选框未选中：

1. 禁用两个选择
2. 使用 setDisplayNone 函数使所有 .divToggle 不可见
3. 将选择的值重置为默认值（在您的情况下为“已选择”）

当您在第二个下拉菜单中选择一个值时：

1. 使用 setDisplayNone 函数使所有 .divToggle 不可见
2. 获取选定的值
3. 使用jquery选择div并设置显示哟块

Answer 2

查看此工作演示：http://jsfiddle.net/wth8mrLa/

更新了一些脚本；

1) 准备好 DOM 中的脚本

2) 添加了 select box2 变量$select2 = $('#box_g2');

3）当复选框取消选中时，禁用两个选择框，重置空值并隐藏div

其余脚本相同。

JQUERY

//Toggle DIV Visibility Using the 2nd Dropdown Selection
$(document).ready(function() {

    $("select").change(function() {
        $(this).find("option:selected").each(function() {
            var optionValue = $(this).attr("value");
            if (optionValue) {
                $(".divToggle").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else {
                $(".divToggle").hide();
            }
        });
    }).change();

    //Toggle 1st Selection Dropdown Once Checkbox is Checked
    var $checkBox = $('#mondayTransfer'),
        $select = $('#mondayOptions'),
        $select2 = $('#box_g2');

    $checkBox.on('change', function(e) {
        if ($(this).is(':checked')) {
            $select.prop('disabled', false);
        } else {
            $select.val('').prop('disabled', true);
            $select2.val('').prop('disabled', true);
            $(".divToggle").hide();
        }
    });

    //Enable DropDown Selection
    $(function() {
        $('select').change(function() {
            if ($(this).attr('id') == 'mondayOptions' && $(this).val() == 'Default') {
                $('select').not(this).prop('disabled', true).val('Disabled');
            } else {
                $('select').not(this).removeProp('disabled');

                $('select option').removeProp('disabled');
                $('select').each(function() {
                    var val = $(this).val();
                    if (val != 'Default' || val != 'Disabled') {
                        $('select option[value="' + val + '"]').not(this).prop('disabled', true);
                    }
                });
            }
        });
    });

});

Answer 3

你所有的 js 代码都必须在 document.ready() 函数中。

$(document).ready(function() {
   //paste your code here....
});