С переключателями Twitter Bootstrap, каков чистый способ ввода формы?

Я использую Twitter BootstrapJavascript радио переключатели и хотите получить ввод формы в зависимости от состояния переключателя.

Самый простой подход, который я могу найти, это добавить невидимый тег в кнопки -вот полезный jsFiddle пример того, что кого-то вырвало.

Это работает хорошо, но это все еще своего рода клочок. Мой вопрос: каков чистый способ получения ввода формы с этих кнопок, то есть без дополнительных скрытых радиовходов?

Ответы на вопрос(3)

index() функционировать так:

$('div.btn-group .btn').click(function(){
    if ($(this).index() != $('div.btn-group .btn.active').index()){
        alert($(this).index());
    }
})​;

Я также добавил условие, чтобы не получать оповещение, если активная кнопка уже выбрана.

 Ghopper2114 сент. 2012 г., 19:39
Спасибо, но это не дает мне входное значение, которое отправляется с формой.
 14 сент. 2012 г., 20:34
Вы можете положитьvalue атрибут в кнопках и опубликовать эти значения с помощьюjquery.post()
 Ghopper2116 сент. 2012 г., 15:53
Понятно, +1 для этого подхода, о котором я рад знать, но необходимость вручную получать все входы обычной формы, а также специальные переключатели не кажется более элегантной. Я думаю, что я только что согласился с тем, что вам нужен ввод для нормальной работы формы, и скрытый ввод не так уж и плох (особенно потому, что я автоматизировал создание и обработку их с помощью виджетов Django).
Решение Вопроса

$(this).children('input[name="is_private"]').val()

DEMO

Я думаю, что неправильно прочитал ваш вопрос в первый раз ... Вы можете создать скрытый элемент формы (он нужен вам для доступа к значению при отправке формы, если вы не используете AJAX) и использовать JS для установки его значения.

HTML

<input type="hidden" name="status" id="status" value="" />

JS

$('div.btn-group button').click(function(){

    $("#status").attr('value', $(this).attr('id'));

})​

DEMO

 Ghopper2113 июл. 2012 г., 20:41
Попался. Так что нет никакого способа обойти скрытый ввод. Конечно, гораздо менее полезно иметь фактический скрытый ввод, чем тот, который стал невидимым с помощью CSS. Я надеялся сделать это без дополнительного JS, но в конце концов я использую кнопки Bootstrap's JS ... Спасибо!
 13 июл. 2012 г., 19:55
Вам понадобится хотя бы один скрытый ввод. Я обновил свой ответ этим.
 Ghopper2113 июл. 2012 г., 19:18
Привет, спасибо, но, кажется, клуджем вообще нужна скрытая кнопка радио. Есть ли способ сделать это без этих скрытых переключателей?

которое хорошо работает как с простой формой POST, так и с AJAX, заключается в том, чтобы иметь скрытое поле ввода, которое представляет текущее состояние группы кнопок. Затем вы можете обрабатывать все эти группы кнопок одинаково, используя следующую структуру разметки:

<form>
    <div id="test-group" class="btn-group" data-toggle="buttons-radio" data-toggle-name="testOption">
        <input type="hidden" name="testOption"/>
        <button type="button" class="btn" data-toggle-value="one">One</button>
        <button type="button" class="btn" data-toggle-value="two">Two</button>
    </div>
</form>

И следующий Javascript для настройки любых групп кнопок на странице:

$(function () {
$('div.btn-group[data-toggle-name]').each(function () {
    var group = $(this);
    var form = group.parents('form').eq(0);
    var name = group.attr('data-toggle-name');
    var hidden = $('input[name="' + name + '"]', form);
    $('button', group).each(function () {
        $(this).on('click', function () {
            hidden.val($(this).data("toggle-value"));
        });
    });
});
});

Попробуйте это на jsFiddle& # X200B;

Ваш ответ на вопрос