0
229
VistasCómo deshabilitar/habilitar la entrada cuando el usuario selecciona el menú desplegable
Estoy usando DataTables 1.10.16, lo que estoy tratando de lograr es deshabilitar/habilitar la entrada cuando el usuario selecciona el menú desplegable. 
p.ej. Cuando el usuario seleccione 0, deshabilite la entrada. Cuando se seleccionan otras opciones, habilite la entrada.
por favor revise el código a continuación.
{ "targets": [OPTIONS], "orderable": false, "render": function (data, type, row) { var optionsCombo ='<select class="form-control OPTIONS_DATA" name="OPTIONS_DATA" style="width: 150px;"> '; for(var i = 0; i<data.length; i++){ optionsCombo += `<option value='${data[i].options_code}' >${data[i].options_desc}</option>`; } optionsCombo += '</select>'; return optionsCombo ; } }, { "targets": [DETAILS], "orderable": false, "render": function (data, type, row) { return `<input class="form-control DETAILS" name="DETAILS" type="number" maxlength="2" style="" value = ${data}>`; } }código HTML renderizado:
<select class="form-control OPTIONS_DATA options0" name="OPTIONS_DATA" style="width: 150px;"> <option value="0">0</option> <option value="1" selected="selected">1</option> <input class="form-control DETAILS detailsRow0" name="DETAILS" " type="number" maxlength="2" >ahora puedo deshabilitar la entrada colocando el siguiente código en el evento createdRow.
$(row).find('input').attr('readonly', 'true');También sigo la solución publicada en este enlace pero no funciona para mí.
Yo también uso esta función. Funciona cuando lo coloco en la consola de Chrome, pero cuando lo coloco dentro del archivo js, no puedo deshabilitar/habilitar la entrada.
$('#example select.form-control.OPTIONS.options0').change(function() { if( $(this).val() == 1) { $('#example input.detailsRow0').prop( "disabled", false ); } else { $('#example input.detailsRow0').prop( "disabled", true ); } });cualquier sugerencia sera apreciada.
1 Respuestas
Responde la pregunta0
Solo por la imagen publicada en OP, vi por qué podría haber dificultades. Las etiquetas que están en las celdas de la tabla son difíciles de entender al principio. Normalmente, en un diseño, al atravesar el DOM es fácil porque las etiquetas anidadas eran accesibles y la mayoría de las referencias se originaron en el document .
Las tablas, por otro lado, están agrupadas y cada celda individual y su contenido están aislados porque las tablas HTML están muy orientadas a filas: se agregan/eliminan <tr> , mantienen todas las celdas en orden, etc., pero son invisibles.
Aquí hay algunas cosas a tener en cuenta:
El 99 % de las veces, los controles de formulario requieren la interacción del usuario.
Considere un evento de formulario (por ejemplo, entrada, cambio, envío, reinicio, etc.)
Se puede hacer referencia a la etiqueta de origen (es decir, el elemento con el que el usuario interactuó como si hiciera clic, cambiara, pasara el cursor sobre, etc.) usando
event.targetothis(jQuery$(this)) dentro del controlador de eventos (es decir, la función que se usa cuando se ve un evento). disparadores.)Si su
e.targetothisestá en una celda de la tabla, entonces es muy probable que desee acceder a otra etiqueta que esté en la misma fila. Comience su recorrido desdethis:thissube a la celda en la que esta<td> 🠉 <select> // $(this).parent('td') </td>Ahora piense desde la perspectiva de la celda, necesita ir a la siguiente celda y bajar a la celda para
.find()la entrada.🠊 <td></td> 🠋 <td> <input> // .next('td').find('input'); </td>
$('select').on('change', switchFields); function switchFields(e) { const input = $(this).parent('td').next('td').find('input'); if ($(this).val() === "0") { input.prop('disabled', true); } else { input.prop('disabled', false); } }; <table> <tbody> <tr><td><select> <option default></option> <option value=0>OFF</option> <option value=1>ON</option> </select></td><td><input></td></tr> <tr><td><select> <option default></option> <option value=0>OFF</option> <option value=1>ON</option> </select></td><td><input></td></tr> <tr><td><select> <option default></option> <option value=0>OFF</option> <option value=1>ON</option> </select></td><td><input></td></tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>