jQuery: выбор элементов и использование функции attr () для «живых» привязок - PullRequest
0 голосов
/ 31 октября 2011

Я хочу выбрать элемент флажка «Вход» через jQuery и динамически пометить его или снять галочку.

Я использую код, подобный следующему:

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

Совершенно верно - и это прекрасно работает.Однако эти элементы ввода динамически стилизуются с помощью jQuery Uniform CSS - http://uniformjs.com/ - очень приятной библиотеки jQuery для элементов нестандартного стиля.

Проблема заключается в том, что Uniform слегка меняет структуру DOM путем переносаэти элементы в пользовательских оболочках (хотя у ввода все еще есть идентификатор, который я ему присвоил и т. д.).Я хочу использовать $(...).live с attr, но не могу понять, как передать параметры attr при использовании Live.

Кто-нибудь может помочь?Спасибо!

РЕДАКТИРОВАТЬ: Чтобы прояснить ситуацию, я разместил еще немного кода ниже.

Мой PHP-скрипт выводит таблицу пользователей.Для каждого пользователя есть пять областей сайта, к которым они могут или не могут получить доступ, в каждой области они могут выполнять разные задачи.Это просто галочки.Но я хочу иметь выпадающий список «Предустановка», в котором будут автоматически отмечаться определенные комбинации доступа к задачам / областям.

Вот мое событие переключения предустановок:

$('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(), но эй, это работает!

Ответы [ 3 ]

0 голосов
/ 31 октября 2011
$('#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/

0 голосов
/ 31 октября 2011

Я не понимаю, зачем вам нужен другой обработчик событий, вы можете установить / снять флажки напрямую:

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

Дело в том, что вы меняете выбор, который вызывает функцию setPermissions.Вы хотите каких-то специальных действий, когда вы нажимаете на флажки ??

отметьте это jsfiddle

0 голосов
/ 31 октября 2011

Может быть, вы можете попробовать это

$('input#my_input').live(function(){
   $(this).attr('checked', true);
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...