Change background color of jquery multiselect plugin

0

Personal I'm using the JQuery multiselect plugin link .

It happens that it is giving me two difficulties.

The first difficulty is with CSS: I need to change the colors that it places in checkboxes and fonts. I've already looked for where this is and I did not find it.

TheotherdifficultyiswithJQueryitself.Ineedtocreateafunctionthat,whenclickingonthefirstoption,thatis,indifferent,theotherfieldsaredisabledtochoose.And,ifclickedagainreleasestheremainingfields.Still,ifanyfieldotherthantheindifferentisselected,thentheindifferentoneisdisabled.OrfindwhereIcanchangethetextthatappearsintheSELECTboxforeachoftheselect's.

jquery.multiselect.css

.ui-multiselect{padding:2px02px4px;text-align:left}.ui-multiselectspan.ui-icon{float:right}.ui-multiselect-single.ui-multiselect-checkboxesinput{position:absolute!important;top:auto!important;left:-9999px;}.ui-multiselect-single.ui-multiselect-checkboxeslabel{padding:5px!important}.ui-multiselect-header{margin-bottom:3px;padding:3px03px4px}.ui-multiselect-headerul{font-size:0.9em}.ui-multiselect-headerulli{float:left;padding:010px00}.ui-multiselect-headera{text-decoration:none}.ui-multiselect-headera:hover{text-decoration:underline}.ui-multiselect-headerspan.ui-icon{float:left}.ui-multiselect-headerli.ui-multiselect-close{float:right;text-align:right;padding-right:0}.ui-multiselect-menu{display:none;padding:3px;position:absolute;z-index:10000;text-align:left}.ui-multiselect-checkboxes{position:relative/*fixesbuginIE6/7*/;overflow-y:scroll}.ui-multiselect-checkboxeslabel{cursor:default;display:block;border:1pxsolidtransparent;padding:3px1px}.ui-multiselect-checkboxeslabelinput{position:relative;top:1px}.ui-multiselect-checkboxesli{clear:both;font-size:0.9em;padding-right:3px}.ui-multiselect-checkboxesli.ui-multiselect-optgroup-label{text-align:center;font-weight:bold;border-bottom:1pxsolid}.ui-multiselect-checkboxesli.ui-multiselect-optgroup-labela{display:block;padding:3px;margin:1px0;text-decoration:none}/*removelabelbordersinIE6becauseIE6doesnotsupporttransparency*/*html.ui-multiselect-checkboxeslabel{border:none}

HTML:

<divclass="buscaImovel"><br />
  <h1 >Pesquise pelo imóvel que deseja</h1>
  QUERO COMPRAR E QUERO VENDER<br />
  <form action="busca.php"  method="post">
    <input type="hidden" id="tipos" name="tipos">
    <input type="hidden" id="bairros" name="bairros">

    <div class="camposBusca">
      <?php  $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
      <label class="labelPequeno">Tipo</label>
      <br />
      <select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($tiposImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($tiposImoveis as $tipoImovel) {
                   echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
               }
             }
           ?>
      </select>
    </div>
    <div class="camposBusca">
      <?php  $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
      <label class="labelPequeno">Bairro</label>
      <br />
      <select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($bairrosImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($bairrosImoveis as $bairrosImovel) {
                   echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
               }
             }
           ?>
      </select>      
    </div>
    <div class="camposBusca">
      <button>Buscar</button>
    </div>
  </form>
  <div style="height:15px;"></div>
  <div class="alternativaEscolha"> <a href="buscaAvancada.php">
    <label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
    </a> </div>
  <div class="alternativaEscolha"> 
    <!--abrir popUp--> 
    <a href="buscaCodigo.php">
    <label class="labelGrande" style="background-color:#CCC;">Busca por Código</label>
    </a> </div>
</div>

JQuery

  $(function(){
      $("#tipo").multiselect();
      $("#bairro").multiselect();
  });

  $("#tipo").multiselect().change(function() {
      $("#tipos").val($("#tipo").multiselect().val());    
  })
  $("#bairro").multiselect().change(function() {
      $("#bairros").val($("#bairro").multiselect().val());    
  })

How far did you go:

<script type="text/javascript">
  $(document).ready(function(){

    for (i = 0; i < $(".ui-multiselect-checkboxes").length; i++) {  
      $ui = $(".ui-multiselect-checkboxes");
      $indiferente = $ui.find("[title=Indiferente]");
      $indiferente.prop("checked", true);
      $ui.find("input").change(function(){
        if($(this).attr("title") != "Indiferente" && this.checked){
            $indiferente.prop("checked", false); //desmarco indiferente se algum
                                                //outro for selecionado
        }
        if(!$ui.find("input:checked").length){ //se nenhum input estiver marcado
            $indiferente.prop("checked",true); //marco indiferente

        }
      })

      $indiferente.change(function(){                 //quando indiferente mudar
        if(this.checked){                             //se estiver marcado
            $ui.find("input").not("[title=Indiferente]").prop("checked", false);                       
                                                      //desmarco outros
        }           
      })

      $("#ui-multiselect-tipo-option-0").click(); $("#ui-multiselect-bairro-option-0").click();

    }
  })



  $(function(){
      $("#tipo").multiselect();
      $("#bairro").multiselect();
  });


</script>


<script>
$(document).ready(function(e){
  $(".fechar").click(function() {
    $(".buscaCodigo").hide();
    $(".fechar").hide();
  });

  $(".alternativaEscolha").click(function() {
    $(".buscaCodigo").show();
    $(".fechar").show();
  });  

});
</script>

<div class="fechar">
  <img src="_img/btn-close.png" style="width:50px;" />
</div>

<div class="buscaCodigo">
   <form action="busca.php" method="post">

     <input type="hidden" name="acao"  value="buscaCodigo" />

     <label>Código</label><input type="text" class="typeTextMedio" id="codigo"  name="codigo" required />

     <input type="submit">

   </form> 
</div>

<div class="buscaImovel"><br />
  <h1 class="h1Centralizado">Pesquise pelo imóvel que deseja</h1>

  <div class="divBusca">

  <form action="busca.php"  method="post">
    <input type="hidden" name="acao" value="buscaPrincipal">

    <div class="camposBusca">
      <?php  $tiposImoveis = $tiposDao->pesquisaTipos(); ?>
      <label class="labelPequeno">Tipo</label>
      <br />
      <select multiple="multiple" id="tipo" name="tipo[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($tiposImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($tiposImoveis as $tipoImovel) {

                   echo "<option value='".$tipoImovel->getIdTipos()."'>".$tipoImovel->getNome()."</option>";
               }
             }
           ?>
      </select>
    </div>

    <div class="camposBusca">
      <?php  $bairrosImoveis = $imoveisDao->pesquisaBairros("Muriaé"); ?>
      <label class="labelPequeno">Bairro</label>
      <br />
      <select multiple="multiple" id="bairro" name="bairro[]" size="1" required>
        <option value="Indiferente">Indiferente</option>
        <?php
             if ($bairrosImoveis == null) {
                 echo "<option value=''>Não há tipo cadastrado ainda!</option>";
             } else {
               foreach ($bairrosImoveis as $bairrosImovel) {
                   echo "<option value='".$bairrosImovel."'>".$bairrosImovel."</option>";
               }
             }
           ?>
      </select>      
    </div>

    <div class="camposBusca" style="height:55px; width:55px; margin-bottom:0;">
      <input type="submit" style="background-image: url(_img/pesquisar.png); background-repeat:no-repeat; background-size:contain;" value="Pesquisar"  />
    </div>

  </form>
  </div>

  <div style="height:15px;"></div>

  <div class="alternativaEscolha">
    <a href="buscaAvancada.php">
      <label class="labelGrande" style="background-color:#CCC;">Busca Avançada</label>
    </a> 
  </div>

  <div class="alternativaEscolha"> 
    <!--abrir popUp--> 
        <label class="labelGrande" style="background-color:#CCC; color:#FFF">Busca por Código</label> 
  </div>

</div>

<script>
  $("#tipo").multiselect().change(function() {
      $("#tipos").val($("#tipo").multiselect().val());    
  })
  $("#bairro").multiselect().change(function() {
      $("#bairros").val($("#bairro").multiselect().val());    
  })
</script>
    
asked by anonymous 20.04.2016 / 22:00

1 answer

1

To change the background color, you can add this to your css:

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
     background: blue !important /* escolha a cor que você quiser */
}

And as for the case of the indifferent, I advise you to improve the identification of the elements, but if you want it to work exactly the way your html is, you can use the following script:

$(document).ready(function(){
  $ui = $(".ui-multiselect-checkboxes").first()
  $indiferente = $ui.find("[title=Indiferente]");
  $ui.find("input").change(function(){
    if($(this).attr("title") != "Indiferente" && this.checked){
        $indiferente.prop("checked", false); //desmarco indiferente se algum
                                            //outro for selecionado
    }
    if(!$ui.find("input:checked").length){ //se nenhum input estiver marcado
        $indiferente.prop("checked",true); //marco indiferente

    }
  })
  $indiferente.change(function(){                 //quando indiferente mudar
    if(this.checked){                             //se estiver marcado
        $ui.find("input").not("[title=Indiferente]").prop("checked", false);                       
                                                  //desmarco outros
    }           
  })
})
    
20.04.2016 / 23:15