Disable a select option by clicking a button

Asked

Viewed 2,595 times

0

How do I so that when I click the button I disable the option selected so that it cannot be chosen again?

<select name="produtos">
  <option value="1">Arroz</option>
  <option value="2">Feijão</option>
  <option value="3">Macarrão</option>
</select>
<input type="submit" value="Enviar">

javascript html jquery
  • 1

    Can you explain why you need to disable the button after Submit? You may not really need it.

  • This after the Submit?

  • Tah using PHP?

3 answers

2


Simple as that little fella:

function disable_select(){

  $("#produtos").prop('disabled',true);

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

<select name="produtos" id='produtos'>
  <option value="1">Arroz</option>
  <option value="2">Feijão</option>
  <option value="3">Macarrão</option>
</select>
<input type="submit" value="Enviar" onclick='disable_select()'>

in the ONclick button calls the function that disables the field, with this code jQuery:

 $("#produtos").prop('disabled',true);

If you want to disable only the option selected:

function disable_select(){
  
  var id = $('#produtos').children(":selected").attr("id");
  $("#"+id).prop('disabled',true);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="produtos" id='produtos'>
      <option value="1" id='optArroz'>Arroz</option>
      <option value="2" id='optFeijao'>Feijão</option>
      <option value="3" id='optMacarrao' onclick='add_opt(optMacarrao)'>Macarrão</option>
    </select>
<input type="submit" value="Enviar" onclick='disable_select()'>

  • But I want to disable only the selected option and not select it

  • um, so hold on

  • @Lucasfonseca see if this is it

  • That’s right!! And a button to enable again.. It is possible?

  • it is possible yes, I will show

0

Change the type attribute from Submit to button and with onclick event call the JAVASCRIPT validator. I used pure Javascript because I don’t know if you are using any library.

function validarForm(){
 var meuform = document.forms.meuformulario || document.forms['meuformulario'];
 meuform.produtos.disabled = true;
 meuform.submit();
}
<form name="meuformulario" action="enviar.php">
<select name="produtos">
  <option value="1">Arroz</option>
  <option value="2">Feijão</option>
  <option value="3">Macarrão</option>
</select>
<input type="button" value="Enviar" onclick="validarForm()">
</form>

0

A new answer with the activate button, since he asked me in the comments.

function disable_select(){
  
  var id = $('#produtos').children(":selected").attr("id");
  $("#"+id).prop('disabled',true);

}

function enable_select(){
  
  var id = $('#produtos').children(":selected").attr("id");
  $("#"+id).prop('disabled',false);

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="produtos" id='produtos'>
      <option value="1" id='optArroz'>Arroz</option>
      <option value="2" id='optFeijao'>Feijão</option>
      <option value="3" id='optMacarrao'>Macarrão</option>
    </select>
<input type="submit" value="Enviar" onclick='disable_select()'>
<button type="button" onclick='enable_select()'>Ativar</button>

  • you wanted to activate all at once or one at a time?

  • I wanted to activate only one at a time

Browser other questions tagged javascript html jquery

You are not signed in. Login or sign up in order to post.