1

Bootstrap の data-toggle 属性を使用して、ユーザーが特権レベルを選択できるようにしようとしています。

JSFiddle で簡単なデモをまとめました。期待される値は次のとおりです。

  • なし: 0
  • ユーザー: 1
  • 管理者: 2
  • ユーザー + 管理者 = 3

問題は、計算された値が実際の切り替えられたボタンの一歩遅れているように見えることです。

これはかなり単純な問題であると確信していますが、これまでのところ、解決策はうまくいきませんでした。

どうやら、ここに JSFiddle コードを複製する必要があるようです。

$(document).ready(function () {
    $('#privileges button').click(function () {
        var privileges = 0;

        //$(this).addClass('active');

        $('#privileges button').each(function () {
            if ($(this).hasClass('active')) {
                privileges += parseInt($(this).attr('value'));
            }
        });

        $('input[id="user[privileges]"]').val(privileges);
    });
});

そしてHTML：

<label for="user[privileges]">Privileges</label>
<input id="user[privileges]" name="user[privileges]" type="text" value="0">
<div id="privileges" class="btn-group" data-toggle="buttons-checkbox" style="width: 100%;">
    <button type="button" class="btn" style="width: 50%;" value="1">User</button>
    <button type="button" class="btn" style="width: 50%;" value="2">Administrator</button>
</div>
4

1 に答える 1

3

このコードを試してください

$(document).ready(function () {
    $('#privileges button').click(function () {
        var privileges = 0;
        var alredySelected = $(this).hasClass('active');

        //$(this).addClass('active');

        $('#privileges button').each(function () {
            if ($(this).hasClass('active')) {
                privileges += parseInt($(this).attr('value'));
            }
        });
        if(alredySelected){
            privileges = parseInt(privileges) - parseInt($(this).val());
        } else {
            privileges = parseInt(privileges) + parseInt($(this).val());
        }

        $('input[id="user[privileges]"]').val( privileges);
    });


});

http://jsfiddle.net/28xsr/1/

于 2013-03-30T10:22:29.053 に答える