Question

我想通过jQuery选择一个Input复选框元素并动态勾选或取消勾选。

我使用的代码如下：

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

完全有效 - 而且效果很好。但是，这些Input元素是由jQuery Uniform CSS动态设计的 - http://uniformjs.com/ - 一个非常好的jQuery库，用于自定义样式元素。

问题是Uniform通过将这些元素包装在自定义包装器中来稍微改变DOM结构（尽管输入仍然具有我为其分配的ID等）。我想将$(...).live与attr一起使用，但在使用Live时我无法确定如何传递attr参数。

有人可以帮忙吗？谢谢！

编辑：为了让事情更加清晰，我在下面发布了更多代码。

我的PHP脚本正在输出用户表。对于每个用户来说，他们可以访问或不能访问的站点的五个区域，在每个区域中他们可以执行不同的任务。这些只是勾选框。但是我希望有一个“预设”下拉列表，它会自动勾选特定的任务/区域访问组合。

这是我的Preset Switch事件：

$('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;
    }
});

setPermissions()功能：

// 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);
    });
}

我现在知道，一切都设置为“真实” - 这只是为了让测试更加清晰。我稍后会设置适当的访问配置。

最后，我的HTML看起来像这样（许多动态的一行）：

<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>

编辑2：问题已解决。不得不在我的元素上使用$.uniform.update()，以便制服可以直观地更新它 - 它是第一种方式正常工作，只是没有刷新显示。仍然没有解释live()上的错误，但嘿，它有效！

Answer 1

也许你可以试试这个

$('input#my_input').live(function(){
   $(this).attr('checked', true);
});

Answer 2

$('#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/

Answer 3

我不明白为什么你需要一个Other事件处理程序，你可以直接检查/取消选中复选框：

function setPermissions(user_id, task1, task2, task3, task4, task5)
{
    $('input#permission_task1_'+user_id ).prop('checked', task1);
    $('input#permission_task2_'+user_id ).prop('checked', task2);
    $('input#permission_task3_'+user_id ).prop('checked', task3);
    $('input#permission_task4_'+user_id ).prop('checked', task4);
    $('input#permission_task5_'+user_id ).prop('checked', task5);   
}

重点是，你改变了select，它触发了setPermissions函数。当你点击复选框时，你想要一些特殊的动作吗？

check this jsfiddle

jQuery：选择元素并在'live'绑定上使用attr（）函数

3 个答案: