使用復選框啟用下拉選擇，切換相關下拉和 DIV 可見性

Question

我有一個有趣的場景涉及使用復選框啟用下拉菜單。 更改第一個下拉列表的狀態后，應啟用第二個下拉列表。 在第二個下拉列表中進行選擇后，它會切換 2 個隱藏 DIV 的可見性。 像下面的圖片：

我有一個原型JSFIDDLE ，我一直在研究，但腳本存在一些問題，例如：

1-盡管下拉列表包含“禁用”屬性，該屬性僅應在選中復選框后啟用，但只有單擊復選框 2 次才有效。 這是腳本：

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

2- 2nd Selection 下拉菜單也應該被禁用； 對 1st 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);
                }
            });
        }
    });

});

3-取消選中該復選框后，應禁用所有下拉列表。

我將不勝感激任何幫助。

Answer 1

我稍微重構了你的代碼，你可以在這里測試

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

如果您從代碼段的 //Enable 下拉選擇部分中刪除所有代碼，您將獲得您想要的部分行為。

無論如何，這是它現在的工作方式：

當復選框被選中時：

1. 啟用第一個下拉菜單。

當復選框未選中：

1. 禁用兩個選擇
2. 使用 setDisplayNone 函數使所有 .divToggle 不可見
3. 將選擇的值重置為默認值（在您的情況下為“已選擇”）

當您在第二個下拉列表中選擇一個值時：

1. 使用 setDisplayNone 函數使所有 .divToggle 不可見
2. 獲取選定的值
3. 使用jquery選擇div並設置顯示yo塊

Answer 2

檢查這個工作演示： http : //jsfiddle.net/wth8mrLa/

更新了您的一些腳本；

1) 移動 DOM 內的腳本准備好

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

3) 當復選框取消選中時，禁用兩個選擇框，重置空值並隱藏 div

其余腳本相同。

查詢

//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....
});