im doing a form using Angular JS and i need to deactivate a few inputs in a onchange event of a option select.
If i choose certain option i have to deactivate like 4 inputs, and by doing this im not able to sumbit the form until i write something on the inputs, so how i can deactivate those inputs and remove the required option of the inputs? in order to sumbit the remain info on the form without asking me for the deactivate inputs.
Thanks.
<?php
$consultar = new Consultar();
$result = $consultar->_ConsultartiposProcesosCobranza();
$num_rows = pg_num_rows($result);
//Consultar OS
$resOs = $consultar->_ConsultarOS();
$num_os = pg_num_rows($resOs);
//Consultar Tipo Servidor
$resServidor = $consultar->_ConsultarTipoServidor();
$num_servidor = pg_num_rows($resServidor);
?>
<style>
.Desc {margin-right: 12%; margin-top: 3%; text-align: center;}
.TopMAr {margin-top: 2%;}
</style>
<div class="col-xs-12 col-md-12 FormularioCobranza" data-ng-app="" >
<h2 class="text-center">Formulario ejecutables Cobranza</h2>
<div class="col-xs-12 alert alert-success text-center" id="AlertAgregar" style="display:none;">
<label class="text-center">Servidor Agregado</label>
</div><!-- AlertAgregar-->
<form id="form" name="form">
<div class="col-xs-4" ng-class="{ 'has-success': form.num_servidor.$valid}">
<label>Servidor: </label>
<input type="text" placeholder="número de Servidor" class="form-control" name="num_servidor" id="num_servidor"
required ng-model="usuario.num_servidor" >
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_servidor.$dirty " style="position: absolute;" id="servidor_valid">
<p class="help-block text-danger" ng-show="form.num_servidor.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4" ng-class="{ 'has-success': form.num_discoduro.$valid}">
<label>Disco Duro: </label>
<input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoduro" id="num_discoduro"
required ng-model="usuario.num_discoduro" >
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoduro.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.num_discoduro.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4" ng-class="{ 'has-success': form.num_ram.$valid}">
<label>Ram: </label>
<input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ram" id="num_ram"
required ng-model="usuario.num_ram" >
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ram.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.num_ram.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_discoactual.$valid}">
<label>Disco Duro Usado: </label>
<input type="text" placeholder="Cantidad En GB" class="form-control" name="num_discoactual" id="num_discoactual"
required ng-model="usuario.num_discoactual" >
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_discoactual.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.num_discoactual.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.num_ramactual.$valid}">
<label>Ram Usado: </label>
<input type="text" placeholder="Cantidad En GB" class="form-control" name="num_ramactual" id="num_ramactual"
required ng-model="usuario.num_ramactual" >
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.num_ramactual.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.num_ramactual.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_os.$valid}">
<label>Sistema Operativo: </label>
<select class="form-control" id="id_os" name="id_os" required ng-model="usuario.id_os">
<option value="">Seleccionar...</option>
<?php
for($i=0; $i<$num_os; $i++)
{
$filaOs = pg_fetch_array($resOs);
$nb_os = $filaOs['desc_osc'];
$id_os = $filaOs['id'];
echo '<option value="'.$id_os.'">'.$nb_os.'</option>';
}
?>
</select>
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_os.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.id_os.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-4 TopMAr" ng-class="{ 'has-success': form.id_servidor.$valid}">
<label>Tipo: </label>
<select class="form-control" id="id_servidor" name="id_servidor" required ng-model="usuario.id_servidor" onchange="VerificarTipoServidor(this)">
<option value="">Seleccionar...</option>
<?php
for($i=0; $i<$num_servidor; $i++)
{
$filas = pg_fetch_array($resServidor);
$desc_ser = $filas['desc_servidor'];
$id_servidor = $filas['id'];
echo '<option value="'.$id_servidor.'">'.$desc_ser.'</option>';
}
?>
</select>
<div class="col-xs-6 IzquierdaEspacio" ng-show="form.id_servidor.$dirty " style="position: absolute;">
<p class="help-block text-danger" ng-show="form.id_servidor.$error.required"> Campo Obligatorio</p>
</div>
</div>
<div class="col-xs-12" style="margin-top:3%">
<div class="col-xs-5 pull-right" style="margin-right: 14%;">
<input type="button" value="Cancelar" id="btn-danger" onclick="Cancelar()" class="btn btn-danger">
<input type="button" value="Enviar" id="btn-cobranza" onclick="GuardarEjecutable()" class="btn btn-success" ng-disabled="form.$invalid">
<!--<input type="button" value="Enviar" id="btn-cobranza" ng-click="usuarios(usuario)" class="btn btn-success">-->
</div>
</div>
</form>
</div><!-- añadir cobranza-->
function VerificarTipoServidor(input) { Option = $(input).find("option:selected").text(); console.log(Option); if(Option=="PBX") { //Desabilitando los inputs $("#num_discoduro").prop("readonly",true); //$("#num_ram").prop("readonly",true); //$("#num_discoactual").prop("readonly",true); //$("#num_ramactual").prop("readonly",true);
//Pruebas
$("#num_discoduro").removeAttr("required");
$("#num_ram").removeAttr("required");
$("#num_discoactual").removeAttr("required");
$("#num_ramactual").removeAttr("required");
$("#num_discoduro").val("200");
$("#num_ram").val("200");
$("#num_discoactual").val("200");
$("#num_ramactual").val("200");
}//if
else
{
$("#num_discoduro").prop("disabled",false);
$("#num_ram").prop("disabled",false);
$("#num_discoactual").prop("disabled",false);
$("#num_ramactual").prop("disabled",false);
}//else
}//VerificarTipoServidor
