Tengo el siguiente SELECT que esta conectada con una base de datos. Ademas, al seleccionar un dato de la lista del SELECT, me muestra en los respectivos INPUT los datos correspondiente de los campos asociados con la selección hecha en el SELECT.
Lo que deseo es que al seleccionar cualquier dato de la lista del SELECT, me deshabilite ciertos INPUT. Hasta ahora he podido deshabilitar los INPUTS que deseo solo cuando clickeo en una opción del SELECT y no agrego el código para que me muestren los datos en los INPUT. Pero cuando incluyo el código para que si se muestren en los INPUT los datos correspondientes a la selección que se haga en el SELECT , éstos no se deshabilitan.
En conclusión, quiero que al seleccionar cualquier opción de la lista del SELECT, se me deshabiliten ciertos INPUTS, manteniendo los datos correspondientes en los INPUT de acuerdo a la selección que se haga en el SELECT.
Código que no deshabilita los INPUT, cuando pongo el codigo para que muestre los datos en el INPUT segun seleccion en el SELECT
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<div align="center">
<select id="colaboradores" onchange="deshabilitar(this)">
<script type="text/javascript">
document.getElementById('colaboradores').onchange = function() {
var mOption = this.options[this.selectedIndex];
var mData = mOption.dataset;
var elCodigo = document.getElementById('codigo');
var elDni = document.getElementById('dni');
elCodigo.value = this.value;
elDni.value = mData.dni;
};
function deshabilitar(obj) {
var hab;
frm=obj.form;
num=obj.selectedIndex;
if (num) hab=true;
frm.codigo.disabled=hab;
frm.dni.disabled=hab;
}
</script>
<option value="0" data-dni="" selected disabled>--Seleccione colaborador--</option>
<?php
$query = $conn -> query ("SELECT * FROM colaborador");
while ($row = $query->fetch_assoc()) {
$data="data-dni=\"$row[dni]\"";
$value="value=\"$row[codigo]\"";
echo "<option $value $data>$row[nombre]</option>";
}
?>
</select>
<hr />
<input id="codigo" type="text" placeholder="codigo" />
<input id="dni" type="text" placeholder="DNI" />
</div>
</form>
</body>
</html>
Código que si dehabilita los INPUT, sin poner el codigo para que muestre los datos en el INPUT segun selección en el SELECT
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<div align="center">
<select id="colaboradores" onchange="deshabilitar(this)">
<script type="text/javascript">
function deshabilitar(obj) {
var hab;
frm=obj.form;
num=obj.selectedIndex;
if (num) hab=true;
frm.codigo.disabled=hab;
frm.dni.disabled=hab;
}
</script>
<option value="0" data-dni="" selected disabled>--Seleccione colaborador--</option>
<?php
$query = $conn -> query ("SELECT * FROM colaborador");
while ($row = $query->fetch_assoc()) {
$data="data-dni=\"$row[dni]\"";
$value="value=\"$row[codigo]\"";
echo "<option $value $data>$row[nombre]</option>";
}
?>
</select>
<hr />
<input id="codigo" type="text" placeholder="codigo" />
<input id="dni" type="text" placeholder="DNI" />
</div>
</form>
</body>
</html>