Quiero crear un elemento de selección dinámico donde si elijo una determinada opción y un campo de entrada de texto específico está deshabilitado.
Aquí está mi HTML:
<div class="form-group col-md-2"> <label for="">Tipo de Compra</label> <select name="" class="form-control" id="tipoCompra" required> <option value="">Tipo de compra </option> <option value="Nacional">Nacional</option> <option value="Exterior">Exterior</option> </select> </div>Si el usuario selecciona la opción "Nacional", quiero deshabilitar el siguiente campo de entrada para que no pueda ingresar ningún valor.
<div class="form-group col-md-2"> <label for="fob">Costo Fob</label> <input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required> </div>Estoy usando JavaScript para mis funciones y algo de Jquery, pero no sé cómo crear una función para esto.
Esta es mi función:
function TipoCompra(){ var tipoCompra = document.getElementById('tipoCompra').value; console.log(tipoCompra); var fob = document.getElementById('fob'); if (tipoCompra == 'Nacional'){ fob.disable = true; } else { fob.disable = false; } }Pero no sé cómo cambiar la propiedad deshabilitada.
Debe verificar el cambio de su selección con la función de cambio de jQuery
https://api.jquery.com/cambiar/
Y verifique el valor de su selección.
Luego use la función prop para deshabilitar su elemento.
$('#fob').prop('disabled', true); $("select[name='test']").change(function() { let selectVal = $(this).val(); if (selectVal == 'Nacional') { $('#fob').prop('disabled', false); } else { $('#fob').prop('disabled', true); } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group col-md-2"> <label for="">Tipo de Compra</label> <select name="test" class="form-control" required> <option value="">Tipo de compra </option> <option value="Nacional">Nacional</option> <option value="Exterior">Exterior</option> </select> </div> <div class="form-group col-md-2 costo"> <label for="fob">Costo Fob</label> <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required> </div>HTML
<div class="form-group col-md-2"> <label for="">Tipo de Compra</label> <select name="" id="myList"class="form-control" required onchange="disable()"> <option value="">Tipo de compra </option> <option value="Nacional">Nacional</option> <option value="Exterior">Exterior</option> </select> </div> <div class="form-group col-md-2"> <label for="fob">Costo Fob</label> <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required> </div>JS
function disable(){ if(document.getElementById('myList').value == 'Nacional'){ document.getElementById('fob').disabled = true } else{ document.getElementById('fob').disabled = false } }Según su actualización con su JavaScript, hay algunos cambios que debe hacer:
Suponiendo que desea alinear la función de JavaScript para el cambio como sus otras funciones
Esto debería incluir onChange="TipoCompra()" :
//<select name="" class="form-control" id="tipoCompra" required> <select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required>Esto debería estar deshabilitado d :
//fob.disable = true; fob.disabled = true;disabled="false" no es válido en su entrada:
//<input type="number" step="00.01" id="fob" name="fob" disabled="false" class="form-control" onchange="Todas();" onkeyup="Todas();" required> <input type="number" step="00.01" id="fob" name="fob" class="form-control" onchange="Todas();" onkeyup="Todas();" required>http://www.w3.org/TR/html5/infrastructure.html#boolean-attribute
Varios atributos son atributos booleanos. La presencia de un atributo booleano en un elemento representa el valor verdadero y la ausencia del atributo representa el valor falso.
Los valores "verdadero" y "falso" no están permitidos en los atributos booleanos. Para representar un valor falso, el atributo debe omitirse por completo.
Ejemplo funcional. Nota: Eliminé las llamadas a Todas(); función ya que no se incluyó con su pregunta.
function TipoCompra(){ var tipoCompra = document.getElementById('tipoCompra').value; console.log(tipoCompra); var fob = document.getElementById('fob'); if (tipoCompra == 'Nacional'){ fob.disabled = true; } else { fob.disabled = false; } } <div class="form-group col-md-2"> <label for="">Tipo de Compra</label> <select name="" class="form-control" id="tipoCompra" onChange="TipoCompra()" required> <option value="">Tipo de compra </option> <option value="Nacional">Nacional</option> <option value="Exterior">Exterior</option> </select> </div> <div class="form-group col-md-2"> <label for="fob">Costo Fob</label> <input type="number" step="00.01" id="fob" name="fob" class="form-control" required> </div>