Программно снимите флажок jQuery UI

У меня есть элемент HTML на моей странице, например:

<input type="checkbox" id="locked" /><label for="locked">Locked</label>

И я делаю вызов внутри моего $(document).ready(), чтобы изменить это как кнопку jQuery UI так:

$('#locked').button({
    'icons': {
        'primary': 'ui-icon-unlocked'
    },
    'label': 'Unlocked'
});

Фоновый контекст заключается в том, что пользователь может использовать эту кнопку для блокировки/разблокировки определенного объекта, чтобы фоновый процесс не изменил его, и он начинается с статуса "Unlocked". Если javascript не включен, пользователь видит флажок и ярлык "Locked" рядом с ним.

Я хочу иметь возможность программно проверять/снимать эту кнопку. Я пробовал:

$('#locked').attr('checked', false);

Но кнопка флажка не обновляется, чтобы отобразить статус контролируемого элемента управления.

Я могу проверить свойство checkbox checked, а затем сделать .click(), если он не соответствует тому, что я хочу, но это не очень элегантно.

Ответ 1

Попробуйте следующее:

$('#locked').removeAttr('checked');

Это просто догадка к вашему делу, но обычно работает для меня как шарм.

EDIT: взглянув на документацию jQueryUI, здесь вы также можете попробовать после изменения программно состояния этого флажка:

$('#locked').button( "refresh" )

"Обновляет визуальное состояние кнопки. Полезно для обновления состояния кнопки после того, как измененный или отключенный статус нативный изменяется программно."

Ответ 2

jQuery 1.5.x и ранее: $('#locked').attr('checked','');

jQuery 1.6.0 и более поздние версии: $('#locked').prop('checked', false);

Атрибут checked считается свойством и теперь имеет свой собственный метод. Вы должны использовать .prop(), если он доступен для обеспечения того, чтобы ваши пользователи соблюдали желаемое поведение.

Ответ 3

Используйте новую функцию .prop() в jQuery 1.6 +:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

или с id

$('#myCheckboxId').prop('checked', false);

Для jQuery 1.5 и ниже

$('.myCheckbox').attr('checked','checked');
$('.myCheckbox').removeAttr('checked');