How to make all values unselectabled of a multiple select when one is selected with jQuery/Javascript:

Question

I have a dynamic form using Ajax and jQuery on my Symfony project.

I have a multiple select. I would like in this multiple select, when I choose the value id 7 (which is "outside"), all other value are unselectabled.

Here's the code for the script in my twig view:

function checkOption(obj) {
        var select = document.getElementById("mySpace_databasebundle_zonestechnique_batiments");
        select.disabled = obj.value == "7";
      }

And this is the form code in my twig view. Just know that I'am using a collection, i.e. a formType of Symfony Form to make this form:

<div>
                {{ form_label(form.categorieszonestechnique, "Categorie(s) de la zone technique:", {'label_attr': {'class': 'control-label'}}) }}
                {{ form_errors(form.categorieszonestechnique) }}
                {{ form_widget(form.categorieszonestechnique, {'attr': {'class': 'selectpicker categories', 'onChange': 'checkOption(this)'}}) }}
              </div>

              <div>
                {{ form_label(form.batiments, "Appartenant au bâtiment:", {'label_attr': {'class': 'control-label'}}) }}
                {{ form_errors(form.batiments) }}
                {{ form_widget(form.batiments, {'attr': {'class': 'form-control', 'option selected': '--choose abâtiment--'}}) }}
              </div>

So when I selected the option 7, i-e "outside", I would like to make all other value of the multiple select unselectabled. Then make a default value (null value) to the following field for the select tag of "batiments".

The id for the multiple select (selectpicker) is mySpace_databasebundle_zonestechnique_categorieszonestechnique and the id for the select tag of batiments is mySpace_databasebundle_zonestechnique_batiments.

Someone know how to make all other values of my multiple select unselectable, then put a null value to the following fields, i.e. the select tag for batiments.

Answer 1

 function lock() {
   $("input").prop('disabled', true);
   $("select").prop('disabled', true);
};


 function unlock() {
   $("input").prop('disabled', false);
   $("select").prop('disabled', false);
};

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes"><br/>
  <input type="radio" name="radio" id="radio" value="Yes">
  <input type="radio" name="radio" id="radio" value="No"><br/>
  <select id="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select><br/>
      <select id="pizza_kind1">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select><br/>
 <button name="freez" onClick="lock()">Lock</button>
  <button name="freez" onClick="unlock()">Unlock</button>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

I think this is what I understand from your explanation. If its not what you want then let me know