Tengo un formulario con una select , input y una función que bloquea mi entrada cuando se selecciona una opción.
Agregué una advertencia de que las entradas están bloqueadas cuando alguien selecciona una opción. Me gustaría agregar una función para eliminar esta advertencia cuando alguien elige una opción con value="" .
Está eliminando mi advertencia pero, por ejemplo, cuando elijo el texto de opción 1 y luego el texto 2, mi advertencia se muestra dos veces y luego, cuando elijo una selección con la primera opción, elimina la advertencia pero solo primero.
Cómo cambiarlo para que la advertencia se muestre solo una vez, y no más veces, y lo elimine después de seleccionar con la opción primero.
$(function() { $('#stato').change(function() { var value = $(this).val(); //Pobranie wartości z tego selecta if (value == "") { $('#data_consegna').prop('disabled', false); $("#error").remove(); } else { $('#data_consegna').prop('disabled', true); $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="col-4"> <label>Enabled </label> <select name="stato" id="stato" class="form-control"> <option value="">Choose</option> <option value="Text1">Text1</option> <option value="Text2">Text2</option> <option value="Text3">Text3</option> <option value="Text4">Text4</option> </select> </div> <div class="col-4"> <label>Disabled when choose option in select</label> <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" /> </div>La forma simple de lograr lo que necesita es tener el div de notificación siempre contenido en el DOM, pero oculto, y luego ocultarlo/mostrarlo según el estado de la select , así:
jQuery(function($) { $('#stato').change(function() { var value = $(this).val(); if (value == "") { $('#data_consegna').prop('disabled', false); $("#error").hide(); } else { $('#data_consegna').prop('disabled', true); $('#error').show(); } }); }); #error { color: red; display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="col-4"> <label>Enabled </label> <select name="stato" id="stato" class="form-control"> <option value="">Choose</option> <option value="Text1">Text1</option> <option value="Text2">Text2</option> <option value="Text3">Text3</option> <option value="Text4">Text4</option> </select> </div> <div class="col-4"> <label>Disabled when choose option in select</label> <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" /> <div id="error">Input locked</div> </div>mi advertencia se muestra dos veces
No verifica si ya está allí o lo elimina.
elimina solo primero
Los ID deben ser únicos, por lo que $("#error").remove(); solo eliminará el primero. Utilice clases en lugar de ID para eliminar varios elementos. Si solo agrega una vez, esto no sería un problema; solo explicando por qué elimina solo el primero.
Como se señaló en la otra respuesta, la mejor solución es simplemente .show() / .hide() , por lo que no lo repetiré aquí.
Para actualizar su código, siempre puede eliminar el error y luego volver a agregarlo si es necesario; esto no es lo más eficiente como se indicó anteriormente.
Fragmento actualizado:
$(function() { $('#stato').change(function() { var value = $(this).val(); //Pobranie wartości z tego selecta // always remove any existing error $("#error").remove(); if (value == "") { $('#data_consegna').prop('disabled', false); } else { $('#data_consegna').prop('disabled', true); $('#data_consegna').after('<div id="error" style="color:red;">Input locked</div>'); } }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="col-4"> <label>Enabled </label> <select name="stato" id="stato" class="form-control"> <option value="">Choose</option> <option value="Text1">Text1</option> <option value="Text2">Text2</option> <option value="Text3">Text3</option> <option value="Text4">Text4</option> </select> </div> <div class="col-4"> <label>Disabled when choose option in select</label> <input id="data_consegna" type="text" class="form-control" name="data_consegna" placeholder="Data Consegna" /> </div>También tenga en cuenta que, dado que usa una identificación, solo se puede usar para un único mensaje de error.