find a form field with jquery

Asked

Viewed 780 times

3

I have a select field in html, it is hidden along with a div and disabled.

From the selection of a value (select), it should appear on the screen and be enabled.

I am unable to make the field select enable, always appears disabled.

 $('#'+div).find(':select').prop('disabled', false);

I am using the above code to search for select within a div and select disabled to false. I know that :select is not supported. would like to know how to find a select type field.

HTML AND JS Codes:

HTML:

<div class="form-group">
   <label class="col-sm-2 control-label">Finalidade</label>
     <div class="col-sm-6" id="ocultar">
        <select name="finalidade" class="chosen-select input-md form-control" required>
          <option value="" selected>Selecione uma Finalidade</option>

        </select>
     </div>
</div>
<div id="ocultar_div" style="display: none;">
    <fieldset>
       <div class="form-group">
          <label class="col-sm-2 control-label">Colaborador</label>
             <div class="col-sm-6">
                 <select name="colaborador" class="chosen-select input-md form-control" required disabled>
                     <option value="0" selected>Selecione um Colaborador</option>

                 </select>
             </div>
     </div>
  </fieldset>

JS:

$("select[name=finalidade]").change(function(){
       var tipo = $(this).val();
       var iddiv = $("select[name=finalidade]").parent().attr('id') + '_div'; 
       MostrarEsconderDiv(tipo,iddiv);
    });

function MostrarEsconderDiv(tipo, div) {
    var elemento = $("#"+div).find("select");
    if (tipo == 3) {      
      $("#"+div).css("display", "block");
      elemento.prop("disabled", false);
    } else {
      $("#"+div).css("display", "none");
      elemento.prop("disabled", true);
    }

}
  • 1

    select:hidden in place of :select

  • At times .prop('disabled', false); forehead .removeAttr('disabled').

  • thanks. need also disable in certain situations, not only enable

  • It would be interesting to post the html structure to analyze whether you are getting the div selector correctly as well.

1 answer

1

The problem is in find, change to .find('select')

Online example

EDIT:

There is no error in your code... I believe it is just an error in the html of where your select of name="Finalidade"... missed you posting it...

But I already put an update on this Online Example exactly how your implementation should be...

  • I did and yet select remains disabled

  • @lelopes, then post as is the whole cycle, from html to JS call. Remembering that, the example I put, will not "appear" on the screen, in case of display: none or visibility: hidden of select

  • @Marllonnasser posted the codes with his suggestion

  • @lelopes, next time you edit your question and add HTML code.... And missed you post HTML from where your select of name="Finalidade" is, I think the error is in it.. I edited the answer with another online example to show you that everything is fine :)

  • @Marllonnasser: I have corrected and posted the select code.

  • good! did you see the new online example that I put in the answer? It’s all right, friend.... even with your HTML... still not working? Which browser are you using? is loading jQuery correctly?

  • @Marllonnasser: I saw your example working perfectly. In mine it’s not working, I’m using Chrome. jQuery is right clicking because it is hiding and showing the DIV normally, only it does not enable select when it shows the DIV.

  • Tries with elemento.attr('disabled', 'disabled'); to disable and elemento.removeAttr('disabled'); to enable.

Show 3 more comments

Browser other questions tagged

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