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

Question

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

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

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

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

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

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

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

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

Я мог бы проверить свойство флажка флажка, а затем выполнить .click (), еслиэто не соответствует тому, что я хочу, но это звучит не очень элегантно.

Answer 1

Попробуйте это:

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

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

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

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

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

Answer 2

jQuery 1.5.x и более ранних версий: $('#locked').attr('checked','');

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

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

Answer 3

В более новых версиях JQueryUI должна использоваться функция checkboxradio() с опцией refresh, например:

$("#selector").checkboxradio("refresh");

для визуального обновления флажка после того, как .prop("checked", true); или .prop("checked", false); были использованы для проверки или снятия флажка.

Источник: документация API: http://api.jqueryui.com/checkboxradio/

обновить ()

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

Answer 4

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

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

или с идентификатором

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

Для jQuery 1.5 и ниже

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