Как программно проверить кнопку группы кнопок Bootstrap (переключатель)

http://jsfiddle.net/rphpbqp9/

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-sm btn-primary success active">
        <input type="radio" name="options" id="optionFalse" checked />false
    </label>
    <label class="btn btn-sm btn-primary danger">
        <input type="radio" name="options" id="optionTrue" />true
    </label>
</div>

$('#optionTrue').button('toggle');

Я прочитал больше ответов на вопросы, но ни один из них не работает. Переключатель кнопок не работает, пробовал добавить/удалить "активный" класс, не помогает. Я использую 1.10 jQuery и 3.1 Bootstrap. Это должно быть просто, я рву на себе волосы!


javascript jquery twitter-bootstrap buttongroup
person Csaba Toth    schedule 31.08.2014    source источник

Ответы (3)


arrow_upward
24
arrow_downward

button() нужно вызывать для элемента с классом btn...

$('#optionTrue').closest('.btn').button('toggle');

Это позволит правильно переключать кнопки и правильно обновлять проверенные свойства каждого входа...

Скрипка

person Anthony Chu    schedule 31.08.2014
comment
Вы правы, сэр! Должен ли я тогда поместить идентификатор в метку, чтобы мне не приходилось вызывать «ближайший»? - person Csaba Toth; 31.08.2014
comment
Хотел бы я задать этот вопрос раньше, у меня бы сейчас осталось больше волос. - person Csaba Toth; 31.08.2014
comment
Я только что попробовал, это работает, если я перемещаю идентификаторы на уровень выше, тогда мне не нужно использовать ближайший jsfiddle .net/6h3c5axn/1 , и еще одно: проверенные вызовы тогда не работают. Вы можете копать для ребенка, хотя, чтобы добраться до поля ввода. - person Csaba Toth; 31.08.2014
comment
Потрясающий. Рад помочь. :) - person Anthony Chu; 31.08.2014

arrow_upward
3
arrow_downward

Это безумие, что документы начальной загрузки (3.2) не делают это более очевидным, но вот самый простой метод, который я нашел, чтобы установить начальное состояние переключателей в коде.

<div class="btn-group" data-toggle="buttons">
    <label id="optionFalse" class="btn btn-primary">
        <input type="radio" name="options" /> false
    </label>
    <label id="optionTrue" class="btn btn-primary ">
        <input type="radio" name="options" /> true
    </label>
</div>

if (initTrue) {
    $('#optionTrue').button('toggle');
}
else {
    $('#optionFalse').button('toggle');
}

Прочитав десятки сообщений на эту тему, кажется, что это общие моменты путаницы:

  • Метод 'toggle' не переключается между состояниями (выключено->включено->выключено), как можно было бы ожидать, а просто устанавливает указанную кнопку в положение "включено" и включает все остальные кнопки. выключенный".
  • Ссылаемый идентификатор должен быть на «метке», а не на «входе».
person Jay Borseth    schedule 23.12.2014
comment
Идентификатор указан на этикетке? Насколько это причудливо? - person Csaba Toth; 24.12.2014

arrow_upward
1
arrow_downward

http://jsfiddle.net/y5qccerz/

document.querySelector(".btn-group input[id='optionTrue']").checked = true;
person Hugolpz    schedule 14.01.2015