HTML selectpicker multiple , options "all" disable all other options
<p>I have a select picker element like this in my web page :</p>

<pre><code>&lt;select id="difficulty"  name="difficulty" class="selectpicker"  multiple onchange="ChangeFilters()"&gt;
                                          &lt;option value="-1" selected &gt;All&lt;/option&gt;
                                            &lt;option value="0" &gt;Facile&lt;/option&gt; 
                                            &lt;option value="1" &gt;Normal&lt;/option&gt;
                                            &lt;option value="2"  &gt;Difficile&lt;/option&gt;
                                         &lt;/select&gt;
</code></pre>

<p>I want that when the user select the "All" options (value = '-1') , if there are other options selected they become not selected, and if the option all is selected when the user select an other options the "all option" become not selected.</p>

<p>I have searched for like 2 hours and i can't make this working.</p>

<p>I work with bootstrap and this select element is a selectpicker element, my javascript don't work when i try something .. </p>

<p>Please help !</p>

<p>EDIT :</p>

<p>I posted the working code as an answer, thanks for your help !</p>