html element update

0

The code below

<div class="input-field">
   <select  id="ramal" multiple  name="ramal[]" >
     <option value="all" id="check-all" name="all" selected >Todas</option>
         <?php 
           if(count($ramais) > 0){
              foreach($ramais as $ramal){
                 formatRamal($ramal);
              }
           }
         ?>
   </select>
   <label>Tipo</label>
</div>



/*esta função encontra-se em outro arquivo*/
function formatRamal($ramal){
        echo "<option  class=\"check-ramal\" value=\"$ramal\">$ramal</option>";
    }

Form this select with multiple checkbox, which by default looks like this:

Mydifficultyistoupdatethe<optionvalue="all" id="check-all" selected >Todas</option> so that it appears unchecked when any other value is selected.

The unmarked until done, but does not update on the screen what was done with the following code.

$('#ramal').change(function() {

         if($('.check-ramal').is(":checked")){
            alert("um ramal espcifico foi selecionado");
            $('#check-all').removeAttr("selected");
            $('#check-all').update();
         }

      });

PS * I can not comment on the answers, so I edit here to say that the answers below did not show the <option value="all" id="check-all" name="all" selected >Todas</option> unchecked.

But it works the first time the page loads if you put it just like this:

<script>$('#check-all').removeAttr("selected"); </script>

But, I need the selection to be removed only when I select other values from the select and that by default is selected if no other values are marked.

    
asked by anonymous 13.11.2016 / 04:17

2 answers

0

And if you try like this:

$('#ramal').change(function() {
    var ramal = $('.check-ramal'),
        tudo = $('#check-all');
    if(ramal.is(':selected')){
        tudo.prop("selected", false);
        //console.log($('#ramal').val());
    }
});
    
13.11.2016 / 04:41
0

You can do this:

$('#ramal').change(function() {
    var todas = this.querySelector('#check-all');
    var todasAtivo = this.querySelectorAll('option:checked').length == 1 && todas.selected;
    if (!todasAtivo) todas.selected = false;
});

This code checks if there is only one option chosen and whether this option is #check-all . If this permission is not valid de-select #check-all .

jsFiddle: link

    
13.11.2016 / 07:21