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 not able to make the select field enable, it always appears disabled.
$('#'+div).find(':select').prop('disabled', false);
I'm using the above code to search for the select within a div and then the disabled to false. I know that: select is not supported. I would like to know how to look for a select type field of a div.
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);
}
}