Cree casillas de verificación con jQuery y desmarque una cuando otras estén marcadas

Necesito crear elementos de formulario con el clic de un botón, que tengo, pero también quiero asegurarme de que si se hace clic en Registro completo, los demás no se hacen clic y viceversa. Si se hace clic en cualquiera de los otros, se anula el clic en Registro completo. La función disabledFull es un onClick en cada una de las casillas de verificación. Aquí está mi jQuery:

<script type="text/javascript">
    $(document).ready(function() {

    $("#addGuest").click(function() {

        var intId = $("#guestForm div").length + 1;
        var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
        var fName = $("<label>Guest Name</label><input type=\"text\" class=\"exclusive\" id=\"guestName" + intId + "\" />&nbsp;");
        var fguestOptionFull = $("<label>Full Registration</label><input type=\"checkbox\" class=\"options\" name=\"guestOptionFull\" id=\"guestOptionFull" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"415\">");
        var fguestOptionBreakfast = $("<label>Breakfast</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionBreakfast" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"100\">");
        var fguestOptionThursdayDinner = $("<label>Thursday Dinner</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionThursdayDinner" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"75\">");
        var fguestOptionFridayDinner = $("<label>Friday Dinner</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionFridayDinner" + intId + "\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" value=\"75\">");
        var fguestOptionSundayWorship = $("<label>Sunday Worship</label><input type=\"checkbox\" class=\"options\" id=\"guestOptionSundayWorship" + intId + "\" value=\"0\" onClick=\"disableFull('guestOptionFull" + intId + "\')\" />");
        var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
        removeButton.click(function() {
            $(this).parent().remove();
        });
        fieldWrapper.append(fName);
        fieldWrapper.append(fguestOptionFull);
        fieldWrapper.append(fguestOptionBreakfast);
        fieldWrapper.append(fguestOptionThursdayDinner);
        fieldWrapper.append(fguestOptionFridayDinner);
        fieldWrapper.append(fguestOptionSundayWorship);
        fieldWrapper.append(removeButton);
        $("#guestForm").append(fieldWrapper);

    });

    disableFull = function(id) {
        if ($("#" + id + ":checked").length > 0) {
            this.$("input:checkbox").each(function(x) {
                if ($(x).hasclass("options")) {
                    $(x).removeAttr('checked');
                }
            });
        }
        else {
            this.$("input:checkbox").each(function(x) {
                $(x).attr('checked', true);
            });

        }

    }
});​

</script>

<span id="addGuest">Add Guest</span><div id="guestForm"></div>

preguntado el 12 de junio de 12 a las 21:06

Lo siento. No me quedó claro después de leerlo. No puedo hacer que las casillas de verificación se activen o desactiven en función de si fguestOptionFull está marcada o no. -

Por favor, trate de ser más específico. "No funciona" simplemente no es lo suficientemente bueno. Reduzca su código a lo esencial y, si aún no ve el problema, publique ese código. -

@champton: un violín nos ayudará a resolver su pregunta, porque creo que puede hacer esto con un código simple, reemplazando el suyo. -

2 Respuestas

Prueba esto:

disableFull = function(id) {
    $('#guestForm').on('click', '.fieldwrapper input:checkbox', function() {
        if ($(this).attr('id') == 'guestOptionFull1' && $(this).is(":checked")) {
            $('.fieldwrapper input:checkbox').not('#guestOptionFull1').attr('checked', false);
        } else if ($(this).attr('id') != 'guestOptionFull1' && $(this).is(":checked")) {
            $('#guestOptionFull1').attr('checked', false)
        }
    });
}​

ejemplo de jsFiddle.

Respondido el 12 de junio de 12 a las 21:06

Así que todavía tengo el problema de intentar desmarcar las opciones a la carta si se hace clic en el registro completo y viceversa. Aquí hay un jsfiddle para eso: aquí - champán

No tengo claro lo que quieres. ¿Tu comentario se refiere a mi solución o tienes un problema nuevo? - j08691

He desarrollado un código que está casi completo. Su código no tuvo en cuenta múltiples conjuntos de opciones, lo cual es importante. En el enlace de violín, tengo una solución de modo, pero simplemente no puedo alternar las casillas de verificación. - champán

No necesita el onclick en línea ya que está usando jquery. Simplemente puede usar on para delegar el evento de cambio en los elementos creados dinámicamente. Luego, haga clic en verificar si es la opción 'guestOptionFull'. Si es así, recorra los elementos hermanos y márquelos o desmárquelos.

$('body').on('change', 'input:checkbox', function() {
   if ($(this).attr('name') === 'guestOptionFull' && $(this).is(':checked')) {
        $(this).siblings().not('input[name=guestOptionFull]').prop('checked', false);
   }
   else if($(this).attr('name') === 'guestOptionFull' && $(this).not(':checked')) {
        $(this).siblings().not('input[name=guestOptionFull]').prop('checked', true);
   }
});

http://jsfiddle.net/HCeBr/5/

Respondido el 12 de junio de 12 a las 22:06

Mi problema es si ($('#guestOptionFull'+id).is(':checked') es verdadero, entonces necesito poder desmarcar todos los demás en esa fila. - champán

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.