2014-08-31 4 views
9

http://jsfiddle.net/rphpbqp9/Как программно проверить кнопки Bootstrap Кнопка группы (радио)

<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. Это должно быть просто, я вытаскиваю свои волосы!

ответ

20

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

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

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

Fiddle

+0

Вы правы, сэр! Должен ли я, возможно, поместить идентификатор на ярлык, поэтому мне не нужно называть «ближайший»? –

+0

Хотелось бы, чтобы я задал этот вопрос раньше, у меня осталось бы больше волос. –

+0

Я просто пробовал, он работает, если я перемещаю идентификаторы уровня вверх, тогда мне не нужно использовать ближайший http://jsfiddle.net/6h3c5axn/1/, еще одна вещь: проверенные вызовы не работают тогда. Вы можете выкапывать ребенка, но чтобы попасть в поле ввода. –

2

Это сумасшедшая версия бутстрапа (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'); 
} 

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

  • Метод «тумблер» не переключается между состояниями (OFF-> на -> off), как и следовало ожидать, а просто устанавливает кнопку с привязкой к «on» и включает все остальные кнопки «off».
  • Указанный идентификатор должен находиться на «метке», а не на «входе».
+0

Идентификатор находится на этикетке? Как это странно? –

Смежные вопросы