mercredi 17 février 2016

Why does a checkbox not return unchecked?

I'm working on a site that needs a table full of checkboxes and each one needs to be toggled on/off. Sometimes toggling one on needs to toggle others off and so on.

I did not build the base code, but since it was rather messy with all the logic going on, I decided to make some work like radios so we only have one base function to make much of the logic work.

I also have a function to enable/disable some checkboxes. It all works nicely, no problems at all.

But now there's another thing in play which is a text input. If a certain value is selected in it, some checkboxes automatically get turned on/off and locked in. The same base function is used to do this. But when a checkbox gets disabled with this, and then re-enabled, the following function keeps returning always true only for that checkbox:

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

        // Make checkboxes with names work like radios (radios can't be toggled off)
        if ($(this).attr("name")) {
            // Save clicked toggle value
            var selected_toggle = $(this).attr('value');

            // disable all and then toggle clicked one on
            if ($('input[value="'+selected_toggle+'"]').prop("checked")) {
                console.log("This is checked");
                $('input:checkbox[name='+$(this).attr('name')+']').each(function() {
                    toggle_checkbox($(this).attr('value'), 'disabled');
                });
                toggle_checkbox(selected_toggle, 'enabled', 'on');
            }
            // Enable them all back if unchecking
            else {
                console.log("This is unchecked");
                $('input:checkbox[name='+$(this).attr('name')+']').each(function() {
                    toggle_checkbox($(this).attr('value'), 'enabled');
                });
                $(this).parent().toggleClass("on");
            }
        }
        else {
            // Toggle them on or off
            $(this).parent().toggleClass("on");
        }
    });

The obvious thing would be to say "something is different when locking/unlocking that checkbox", but it's all the same function and same way all other toggles get disabled, this is used from toggle_checkbox function:

function toggle_checkbox(toggle, value, on, lock) {

    // Disable the toggle completely
    if (value == 'disabled') {
        $('input[value="'+toggle+'"]').attr('disabled', 'disabled');
        $('input[value="'+toggle+'"]').parents('li').addClass('disabled');
        $('input[value="'+toggle+'"]').parent().removeClass('on');
        $('input[value="'+toggle+'"]').prop('checked', false);
    }
    // Enable a toggle back
    if (value == 'enabled') {
        $('input[value="'+toggle+'"]').parents('li').removeClass('disabled');

        // Turn it on
        if (on == 'on') {
            $('input[value="'+toggle+'"]').parent().addClass('on');
            $('input[value="'+toggle+'"]').prop('checked', true);
        }
        // Lock it on or remove disabled
        if (lock == 'lock') {
            $('input[value="'+toggle+'"]').attr('disabled', 'disabled');
        }
        else {
            $('input[value="'+toggle+'"]').removeAttr('disabled');
        }
    }
}

When I remove the above code for name attributes, the checkbox works fine. Yet though every other checkbox returns Checked/unchecked properly, when clicking that specific un-disabled one, it always returns "this is checked".

I was using is(":checked") before, changing to prop made no difference.




Aucun commentaire:

Enregistrer un commentaire