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

Question

У меня есть набор радиокнопок, все в стиле пользовательского интерфейса jQuery .button().

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

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

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

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

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

Решение

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

Answer 1

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

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

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

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

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

Answer 2

Несмотря на сообщения об обратном, вы МОЖЕТЕ ссылаться на радио кнопку по ID.Не уверен, почему пользовательский интерфейс 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>

Answer 3

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

.prop('checked',true);

вместо:

.attr("checked", true);

Answer 4

Сброс всех переключателей, но вы можете получить более конкретный с помощью селектора.

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

Answer 5

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

Answer 6

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

Вот и все.

Answer 7

Я решил это путем полного сброса 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);
}