Переключатель jQuery UI - как правильно переключить проверенное состояние

У меня есть набор переключателей, все в стиле с jQuery UI .button().

Я хочу изменить их состояние. Однако, когда я делаю это программно на событие изменения контейнера с помощью:

$("#myradio [value=1]").attr("checked", false);
$("#myradio [value=2]").attr("checked", true);

Значения изменены правильно, но стиль пользовательского интерфейса по-прежнему показывает непроверенную радиокнопку с проверенным стилем, а проверенный по-прежнему выглядит непроверенным.

Я просмотрел документацию jQuery UI по методу button() для переключателей, но нет ничего о том, как изменить состояние и обновить стиль пользовательского интерфейса.

Вкратце проблема состоит в том, что вызов кода $("selector").button("disable"); не меняет активного состояния кнопки - базовый переключатель правильно проверен, но активное состояние пользовательского интерфейса не изменяется. Итак, я получаю кнопку greyed out, которая выглядит так, как будто она все еще проверена, и настоящая выбранная кнопка не отображается.

Решение

$("selector").button("enable").button("refresh");

Ответ 1

Вам нужно вызвать метод refresh после изменения основного состояния:

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

Рабочий пример: http://jsbin.com/udowo3

function setRadio(id) {
    var radio = $('#' + id);
    radio[0].checked = true;
    radio.button("refresh");
}

Это использует идентификаторы для радиостанций, но это не имеет значения, если вы получаете экземпляр jQuery, содержащий соответствующий элемент input[type=radio].

Ответ 2

Несмотря на сообщения об обратном, вы можете указывать переключатель по идентификатору. Не уверен, почему пользовательский интерфейс JQuery не обновляет кнопки автоматически при проверке, но вы делаете это следующим образом:

$('selector').attr('checked','checked').button("refresh");

Рабочий пример:

<div id = "buttons">
 <label for="b1">button1</label>
 <label for="b2">button2</label>
 <label for="b3">button3</label>

 <input type="radio" name = "groupa" id = "b1" value="b1">
 <input type="radio" name = "groupa" id = "b2" value="b2">
 <input type="radio" name = "groupa" id = "b3" value="b3">
</div>

<script>
  $('#buttons input').button();     
  $('#b3').prop('checked', true).button("refresh");
</script>

Ответ 3

Глядя на код, вам нужно переключить класс ui-state-active, но самый простой способ - это просто $('someradiobutton').trigger('click') (или если вы не хотите, чтобы ваши пользовательские обработчики событий запускались, $('someradiobutton').trigger('click.button')).

Ответ 4

Будет ли reset все радиокнопки, но вы можете более точно определить селектор.

$( 'input:radio' )
     .removeAttr('checked')
     .removeAttr('selected')
     .button("refresh");

Ответ 5

Если кто-то все еще сталкивается с этой проблемой, используйте:

.prop('checked',true);

вместо:

.attr("checked", true);

Ответ 6

Я решил это, полностью сбросив Buttonset с помощью setTimeout.

Добавить клик на кнопку радио, которая нуждается в подтверждении.
Обратите внимание на нажатый "radioButton" и полный "radioSet" в приведенном ниже коде:

$('#radioButton').click(function(){
    if(confirm('Confirm Text') != true){
       resetButtonset('#radioSet', 200);
       return false;
    };
});

Создайте удобную функцию, которая сбрасывает ваш Buttonset:

function resetButtonset(name, time){
    setTimeout(function(){$(name).buttonset();}, time);
}

Ответ 7

$('input:radio[name="radioname"] + label[for="eglabel"]').click();

Вот и все.