1

Como limitar o número de opções selecionadas num select para que o formulário não seja enviado acima de uma quantidade máxima.

Por exemplo, Quero que no máximo 3 opções possam ser enviadas no form. Acima disso, queria impedir o usuário de enviar o formulário.

Como posso fazer isso?

<form action="" method="post">
<select class="form-control" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" name="send" value="enviar">
</form>
3
  • 2
    Acho que só com javascript e mesmo assim não tem como realmente impedir, quem sabe o que está fazendo consegue burlar isso, então ainda tem que verificar de novo no servidor com PHP 21/09/2016 às 12:47
  • da uma olhada aqui, acho que ja vai te ajudar> stackoverflow.com/questions/2046205/… 21/09/2016 às 12:58
  • o ideal não seria usar checkboxes para isso? 21/09/2016 às 13:00

2 Respostas 2

3

Você pode fazer por javascript: Olha esse Fiddle

$( "#send" ).click(function() {
  var count = $("#options :selected").length;
  alert( count );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post">
<select class="form-control" id="options" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" id="send" name="send" value="enviar">
</form>

Rodando o código acima também é possível ver o resultado.

Não estou bloqueando o envio, mas se você selecionar múltiplos itens o alert irá exibir quantos.

Basta tratar e usar o javascript como achar melhor.

1

Melhorando um pouco o código do @Ricardo ... Aqui ele desabilita o botão quando atinge mais de 3 selecionados.

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

<script type="text/javascript">
$(document).ready(function(){
  $("#options").change(function(){
    var total = $("#options :selected").length;

   if(total > 3){
     $("#send").prop("disabled", true);
   }else{
     $("#send").prop("disabled", false);
   }
  });
});
</script>
<form action="" method="post">
<select class="form-control" id="options" name="options" multiple="multiple">
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
    <option value="4">Opção 4</option>
    <option value="5">Opção 5</option>
    <option value="6">Opção 6</option>
    <option value="7">Opção 7</option>
    <option value="8">Opção 8</option>
    <option value="9">Opção 9</option>
    <option value="10">Opção 10</option>
</select>
<input type="submit" id="send" name="send" value="enviar">
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .