Casilla Habilitar/Deshabilitar con jQuery

Quiero tener una función jquery que se active cuando se haga clic en cualquier casilla de verificación y, según el campo de valor de la casilla de verificación en la que se haga clic, deshabilitará o habilitará otras casillas de verificación.

Hasta ahora tengo:

$(function () {
    $('input [type="checkbox"]').click(function () {

    });
});

Bien, he hecho algunos progresos... pero todavía no funciona.

<script type="text/javascript">
$(function () {
    $(':checkbox').click(function () {

        $value = $(this).attr('value');

        if ($(this).is(':checked'))
        {
            switch ($value)
            {
                case "BLIPA":
                    $(':checkbox[value*="B"]').attr('disabled', true);
            }
        }
        else
        {
            $(':checkbox').each(function()
            {

            }
        }
    });
});

¿He cometido algún error?

Edit:

Bien, entonces lo he resuelto. Aquí está la solución:

<script type="text/javascript">
$(function () {
    $("input[type='checkbox']").click(function () {

        var value = $(this).attr('value');

        if ($(this).is(':checked')) {

            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', true);
            $(':checkbox[value~="' + value + '"]').attr('disabled', false);

        }
        else {
            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', false);
        }
    });

    function FindModuleRules(string) {

        var modules = new Array();

        var bRegex = /B/;
        var lRegex = /L/;
        var aRegex = /A/;

        if (string.search(bRegex) != -1)
            modules[0] = "B";
        else
            modules[0] = "X";
        if (string.search(lRegex) != -1)
            modules[1] = "L";
        else
            modules[1] = "X";
        if (string.search(aRegex) != -1)
            modules[2] = "A";
        else
            modules[2] = "X";

        return modules;
    }

});

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

4 Respuestas

En primer lugar, no debe haber un espacio entre input y [type="checkbox"] porque eso busca casillas de verificación dentro de otros elementos de entrada (que no es válido) ..

entonces algo como

$('input[type="checkbox"]').click(function () {
    $('otherselector').prop('disabled', this.checked);
});

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

Sin ver exactamente cómo tiene configurado su marcado, es más difícil decirle lo que debe hacer. Sin embargo, ella es una jsFiddle para ilustrar:

HTML

<input type="checkbox" id="ckall" /> Check 'em all!
<ul>
    <li><input type="checkbox" /> Item 1</li>
    <li><input type="checkbox" /> Item 2</li>
    <li><input type="checkbox" /> Item 3</li>
    <li><input type="checkbox" /> Item 4</li>
    <li><input type="checkbox" /> Item 5</li>
</ul>​

JS

$("input[type='checkbox']").click(function() {
    $("ul :checkbox").attr("checked", $(this).is(":checked"));            
});​

Dependiendo de su marcado, y qué exactamente que está buscando hacer determinará sus selectores de jQuery. Sin embargo, supongo que está buscando crear un tipo de casilla de verificación "marcar todo". Si es así, verá en el violín que el marque todas las El evento de casilla de verificación luego selecciona todas las casillas de verificación dentro de algún elemento contenedor. Si no hace esto, también terminará posiblemente cambiando el estado de su marque todas las casilla de verificación.

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

No quiero marcar todas las casillas. Tengo ciertas casillas de verificación que descartan otras. Entonces, necesito poder deshabilitar y habilitar las casillas de verificación en función de eso. - Rick Eyre

@Rick Eyre: entonces, lo único que puedo sugerir es que use nombres de clase para agruparlos, de modo que pueda dirigirse específicamente a grupos cuando otra casilla no está/marcada; de lo contrario, se quedará con un montón de bucle, y eso realmente puede afectar el rendimiento. - Tim Hobbs

$('input [type="checkbox"]').click(function () {
    if($(this).is(':checked')) {
        //do stuff
    }
})

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

¿Cómo recorrería el resto de las casillas de verificación en la página después de determinar si la casilla de verificación está marcada o no? - Rick Eyre

$(':checkbox').each(function(){ //$(this)... } - Thomas

He respondido a la pregunta. Gracias por toda la ayuda.

<script type="text/javascript">
$(function () {
    $("input[type='checkbox']").click(function () {

        var value = $(this).attr('value');

        if ($(this).is(':checked')) {

            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', true);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', true);
            $(':checkbox[value~="' + value + '"]').attr('disabled', false);

        }
        else {
            var modules = FindModuleRules(value);

            $(':checkbox[value*="' + modules[0] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[1] + '"]').attr('disabled', false);
            $(':checkbox[value*="' + modules[2] + '"]').attr('disabled', false);
        }
    });

    function FindModuleRules(string) {

        var modules = new Array();

        var bRegex = /B/;
        var lRegex = /L/;
        var aRegex = /A/;

        if (string.search(bRegex) != -1)
            modules[0] = "B";
        else
            modules[0] = "X";
        if (string.search(lRegex) != -1)
            modules[1] = "L";
        else
            modules[1] = "X";
        if (string.search(aRegex) != -1)
            modules[2] = "A";
        else
            modules[2] = "X";

        return modules;
    }

});

Utilizo la función FindModuleRule para clasificar todas las cadenas de valores y seleccionar caracteres clave que solo aparecen en ciertos valores como 'A', 'L' o 'B' si no se encuentra ninguno, entonces asigno a 'X' que es no se encuentra en ninguna de las cadenas de valores. Luego uso ese carácter para seleccionar todas las casillas de verificación con valores que contienen el carácter y las enciendo o desactivo dependiendo y luego cambio la casilla de verificación en la que se hizo clic a su estado apropiado.

Respondido el 27 de junio de 12 a las 18:06

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