我想從select2（）庫的下拉列表中禁用剩余的選擇選項

Question

我想從select2()庫的下拉列表中禁用剩余的選擇選項，但我不能。 我正在生成一些動態列表中的一些品牌，其中我有一些價值，如“所有品牌”，“本田”，“雅閣”等，如果用戶檢查“所有品牌”，我想禁用所有選擇選項。

我怎樣才能做到這一點？

這是我的jQuery代碼：

$("select.select2").change(function () {
    var selectedCountry = $(this).val();

    if (selectedCountry == 'all_brands') {
        $("dynamicList").prop("disabled", true)
    }
});

這是我的HTML和PHP代碼：

<label class="text-danger">Select Brands</label>
<select class="form-control select2" id="brandAll" multiple="multiple" name="brand_id" data-placeholder="Select Brand to Deal" style="width: 100%;">
    <option value="all_brands" id="checking123">All Brands</option>
    <?php 
    foreach ($brand_list as $brand) {
        echo "<option value='$brand->id' class='dynamicList'>$brand->name</option>";
    }
?>
</select>

Answer 1

要使用類選擇器禁用元素，請嘗試以下操作：

$(".dynamicList").attr('disabled','disabled');

注意：這將禁用所有選項，可能需要用“所有品牌”``排除選項

$(".dynamicList").attr('disabled','disabled');
$("#checking123").removeAttr('disabled');

Bug＃1你使用multiple="multiple"然后$(this).val()返回一個數組，而不是一個值。

Bug＃2你需要修復類選擇器： dynamicList - > .dynamicList

這是完整的代碼：

$("select.select2").change(function (){
       var selectedCountry = $(this).val();

       if (selectedCountry.length > 0 && selectedCountry[0] == 'all_brands') {
           $(".dynamicList").attr('disabled','disabled');
       }
});

編輯：

我建議修復html樣式，使用雙引號作為屬性：

echo '<option value="' . $brand->id . '" class="dynamicList">' . $brand->name . '</option>';

或者甚至喜歡這樣：

<label class="text-danger">Select Brands</label>
<select class="form-control select2" id="brandAll" multiple="multiple" name="brand_id" data-placeholder="Select Brand to Deal" style="width: 100%;">
    <option value="all_brands" id="checking123">All Brands</option>
    <?php foreach ($brand_list as $brand) { ?>
    <option value="<?php echo $brand->id ?>" class="dynamicList"><?php echo $brand->name ?></option>
    <?php } ?>
</select>