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, ie 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, ie "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, ie the select tag for batiments.

Thank you.

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