使用 jQuery 禁用多个 select2 字段

Question

I create a checkbox field and multiple select2 field, and I enable the checkbox field but which change is not affect the multiple select field. I need to disable the multiple select field after disabling the checkbox. is this possible? I tried the below code.

$('select option').prop("disabled", true);

Answer 1

disable select2 using $(".sel2").prop("disabled", true) for more detail see the document https://select2.org/appearance

 $(document).ready(function() { $('.sel2').select2(); }); $(document).on('click','#disable',function() { if ($(this).prop("checked")) { //console.log("in"); $(".sel2").prop("disabled", true); } })

 <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script> <select class="sel2" name="state"> <option value="AL">one</option> <option value="AL">two</option> </select> <select class="sel2" name="state"> <option value="AL">one</option> <option value="AL">two</option> </select> <select class="sel2" name="state"> <option value="AL">one</option> <option value="AL">two</option> </select> <input type="checkbox" id="disable" value="Disable select" /> Disable

if you want to enable and disable select2 fields on checked and unchecked of check box

$(document).on('click','#disable',function() { if ($(this).prop("checked")) { $(".sel2").prop("disabled", true); }else{ $(".sel2").prop("disabled", false); } })

Answer 2

You are currently refering to specific options of the select, I think you need to target the parent select element.

And according to the documentation , see Select2 Disabled Mode , you need to do it like this:

$("select").select2("enable", false);

Nvm, I see I mentioned the old documentation, parent element thing was correct.

Answer 3

$("#disable").change(function() {

  if ($(this).is(":checked")) {
    $("select").attr('disabled', 'disabled');
  }
})

you can use is checked to checking if checkbox is cecked or not