Tengo muchas casillas de verificación con el mismo nombre de clase y debajo de cada una hay un campo de fecha oculto.
Necesito mostrar el div con el campo de fecha y seleccionar una fecha diferente. al principio, necesito agregar 30 días a partir de hoy cuando la casilla de verificación está marcada de forma predeterminada, luego el usuario puede cambiar la fecha.
Cuando hago clic en la primera opción y cambio la fecha, está bien... pero cuando hago clic en otra, el campo de la primera fecha toma el valor predeterminado. ¿Alguna sugerencia?
html
@foreach (var item in Model) { <tr> <td> <div> @Html.CheckBox(item.Title, new { @class = "chkPages", Value = item.ID }) @item.Title </div> <div class="extrafields"> <div class="DurationDisplayDate"> <input name="DurationDisplayDate" class="DurationDisplayDate" /> </div> </div> </td> </tr>--------------------------------------------
$('.chkPages').change(function () { if (this.checked) { var dateStr = new Date(); dateStr.setDate(dateStr.getDate() + 30) dateStr = dateStr.getDate() + "/" + (dateStr.getMonth() + 1) + "/" + dateStr.getFullYear(); $(this).closest('div').next('.extrafields').fadeIn('slow'); //How can I change the next input field? $(".DurationDate").val(dateStr); } else { dateStr = ""; $(this).closest('div').next('.extrafields').fadeOut('slow'); $(".DurationDate").val(dateStr); }Los principales problemas aquí son:
Una solución fácil para esto es reutilizar el código que ya tiene que está seleccionando el contenedor de extras para la animación para encontrar la entrada relevante, por ejemplo.
const extras = $(this).closest('div').next('.extrafields') extras.find('.DurationDisplayDate').val(dateStr) extras.fadeIn('slow')Ejemplo de trabajo completo:
$(document).ready(function() { $('.chkPages').change(function() { if (this.checked) { var dateStr = new Date() dateStr.setDate(dateStr.getDate() + 30) dateStr = `${dateStr.getDate()}/${dateStr.getMonth() + 1}/${dateStr.getFullYear()}` const extras = $(this).closest('div').next('.extrafields') extras.find('.DurationDisplayDate').val(dateStr) extras.fadeIn('slow') } else { const extras = $(this).closest('div').next('.extrafields') extras.find('.DurationDisplayDate').val('') extras.fadeOut('slow') } }) }) .extrafields { display: none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td> <div> <input type="checkbox" class="chkPages" /> </div> <div class="extrafields"> <div class="DurationDisplayDate"> <input name="DurationDisplayDate" class="DurationDisplayDate" /> </div> </div> </td> </tr> <tr> <td> <div> <input type="checkbox" class="chkPages" /> </div> <div class="extrafields"> <div class="DurationDisplayDate"> <input name="DurationDisplayDate" class="DurationDisplayDate" /> </div> </div> </td> </tr> <tr> <td> <div> <input type="checkbox" class="chkPages" /> </div> <div class="extrafields"> <div class="DurationDisplayDate"> <input name="DurationDisplayDate" class="DurationDisplayDate" /> </div> </div> </td> </tr> </table>