Question

I want to select an Input checkbox element via jQuery and dynamically tick or untick it.

I am using code like this:

$('input#my_input').attr('checked', true);

Perfectly valid – and that works just fine. However, these Input elements are being dynamically styled by jQuery Uniform CSS – http://uniformjs.com/ – a very nice jQuery library to custom-style elements.

The problem is that Uniform changes the DOM structure slightly by wrapping these elements in custom wrappers (although the input still has the ID I assigned it, etc). I want to use $(...).live with attr but I can’t work out how to pass the attr parameters when using Live.

Can anybody help? Thanks!

EDIT: To make things a bit clearer, I’ve posted some more code below.

My PHP script is outputting a table of users. For each user is five areas of the site they either can or can’t access, in each area they can perform a different task. These are just tickboxes. But I want to have a ‘Preset’ dropdown list that will automatically tick specific task/area access combinations.

Here’s my Preset Switch event:

$('select.preset_switch').change(function() {

    var user_id = $(this).attr('id');
    var preset  = $(this).val();

    switch(preset)
    {
        case 'Area 1':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Area 2':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Area 3':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Area 4':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Area 5':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Area 6':
            setPermissions(user_id, true, true, true, true, true);
            break;

        case 'Inactive User':
            setPermissions(user_id, false, false, false, false, false);
            break;
    }
});

The setPermissions() function:

// Sets the Input tickboxes for permissions editor
function setPermissions(user_id, task1, task2, task3, task4, task5)
{
    $('input#permission_task1_'+user_id ).live(function() {
        $(this).prop('checked', task1);
    });
    $('input#permission_task2_'+user_id ).live(function() {
        $(this).attr('checked', task2);
    });
    $('input#permission_task3_'+user_id ).live(function() {
        $(this).attr('checked', task3);
    });
    $('input#permission_task4_'+user_id     ).live(function() {
        $(this).attr('checked', task4);
    });
    $('input#permission_task5_'+user_id ).live(function() {
        $(this).attr('checked', task5);
    });
}

I know for now, everything is set to ‘true’ – this is just to make testing clearer. I will set up proper access configurations later on.

Finally, my HTML looks like this (one row of many dynamic ones):

<tr>
    <td>John Smith</td>
    <td>
        <input type="checkbox" name="area1[]" id="permission_task1_1044" class="permission_checkbox" value="1044"  />
    </td>
    <td>
        <input type="checkbox" name="area2[]" id="permission_task2_1044" class="permission_checkbox" value="1044"  />
    </td>
    <td>
        <input type="checkbox" name="area3[]" id="permission_task3_1044" class="permission_checkbox" value="1044"  />
    </td>
    <td>
        <input type="checkbox" name="area4[]" id="permission_task4_1044" class="permission_checkbox" value="1044"  />
    </td>
    <td>
        <input type="checkbox" name="area5[]" id="permission_task5_1044" class="permission_checkbox" value="1044"  />
    </td>
    <td>
        <select class="preset_switch" id="1044">
            <option>Select a preset</option>
            <option>Area 1</option>
            <option>Area 2</option>
            <option>Area 3</option>
            <option>Area 4</option>
            <option>Area 5</option>
            <option>Area 6</option>
            <option>Inactive User</option>
        </select>
    </td>
</tr>

EDIT 2: Problem solved. Had to use $.uniform.update() on my element so that uniform would visually update it – it was working correctly the first way I did it, just not refreshing the display. Still doesn’t explain the error on live() but hey, it works!

Answer 1

$('#the_trigger').live('the_event_you_are_binding_to', function(){
    $('#my_input').attr('checked', true);
    // return false; // depending on your needs
});

http://api.jquery.com/live/