Программный выбор радиостанций в jQuery buttonset приводит к поломке
Я создаю функцию редактора на веб-сайте, используя набор кнопок jQuery на основе переключателей. Когда я загружаю элемент в редактор, мне нужно установить выбранную радиокнопку, а затем, конечно, пользователь может изменить опцию, и она будет сохранена в базе данных. Когда элемент закрывается, я хочу сбросить набор кнопок по умолчанию.
Проблема в том, что, когда я устанавливаю набор кнопок, он работает в первый раз, когда я выбираю каждый элемент, затем он ломается и перестает работать все вместе.
Демо проблемы: http://jsfiddle.net/kallsbo/vSmjb/
HTML:
<div id="dumpSec">
<input type="radio" name="security" id="r_public" value="public" class="rSec">
<label for="r_public"><i class="icon-globe"></i> Public</label>
<input type="radio" name="security" id="r_private" value="private" class="rSec">
<label for="r_private"><i class="icon-lock"></i> Private</label>
<input type="radio" name="security" id="r_link" value="link" class="rSec">
<label for="r_link"><i class="icon-link"></i> Anyone with the link</label>
</div>
<div>
If you use the buttons below you can programmatically select each of the radios in the buttonset once before it all breaks down...
</div>
<div>
<button id="nbr1">Select Private</button><br/>
<button id="nbr2">Select Link</button><br/>
<button id="nbr3">Select Public</button><br/>
</div>
JavaScript:
// Basic function
$("#dumpSec").buttonset();
$("#r_public").attr("checked", true);
$("#dumpSec").buttonset('refresh');
// Put in functions on the demo buttons
$( "#nbr1" )
.button()
.click(function( event ) {
$("#r_private").attr("checked", true);
$("#dumpSec").buttonset('refresh');
});
$( "#nbr2" )
.button()
.click(function( event ) {
$("#r_link").attr("checked", true);
$("#dumpSec").buttonset('refresh');
});
$( "#nbr3" )
.button()
.click(function( event ) {
$("#r_public").attr("checked", true);
$("#dumpSec").buttonset('refresh');
});
Я пробовал несколько вещей, таких как попытка вызвать функцию щелчка на ярлыке для каждой радиокнопки и т. Д., Но я не могу найти ничего, что работает. Любой вклад приветствуется!
2 ответа
Вам нужно использовать .prop() вместо .attr() чтобы установить проверенный статус
$("#r_link").prop("checked", true);
Демо: скрипка
Читайте: атрибуты против свойств