0

誰か助けてくれませんか... http://tympanus.net/Tutorials/UIElements/SearchBox/にある機能を使用することを考えていますが、ラジオの代わりにチェックボックスを使用しています。ドロップダウンに 4 つのラジオ ボタンを表示し、ユーザーが 1 つのオプションだけを選択できるようにします。さまざまなオプションを試しましたが、うまくいきません。最新の jquery -- 1.8 を使用します。

prop、attrを使用してフォーラムを読んでみましたが、役に立ちませんでした。あなたの知識は大歓迎です。

私のhtmlは以下です

    <div class="content">
        <h1>UI Elements</h1>
        <div class="box">
            <h2>Search Box with Filter Demo</h2>
            <form id="ui_element" class="sb_wrapper">
                <p>
                    <span class="sb_down"></span>
                    <input class="sb_input" type="text"/>
                    <input class="sb_search" type="submit" value=""/>
                </p>
                <ul class="sb_dropdown" style="display:none;">
                    <li class="sb_filter">Filter your search</li>
                    <li><input type="radio"/><label for="all"><strong>All Categories</strong></label></li>
                    <li><input type="radio"/><label for="Automotive">Automotive</label></li>
                    <li><input type="radio"/><label for="Baby">Baby</label></li>
                    <li><input type="radio"/><label for="Beauty">Beautys</label></li>

                </ul>
            </form>
        </div>
    </div>
    <div>
    </div>

元のスクリプトは以下のとおりです --

        $(function() {
            /**
            * the element
            */
            var $ui         = $('#ui_element');

            /**
            * on focus and on click display the dropdown, 
            * and change the arrow image
            */
            $ui.find('.sb_input').bind('focus click',function(){
                $ui.find('.sb_down')
                   .addClass('sb_up')
                   .removeClass('sb_down')
                   .andSelf()
                   .find('.sb_dropdown')
                   .show();
            });

            /**
            * on mouse leave hide the dropdown, 
            * and change the arrow image
            */
            $ui.bind('mouseleave',function(){
                $ui.find('.sb_up')
                   .addClass('sb_down')
                   .removeClass('sb_up')
                   .andSelf()
                   .find('.sb_dropdown')
                   .hide();
            });

            /**
            * selecting all checkboxes
            */
            $ui.find('.sb_dropdown').find('label[for="all"]').prev().bind('click',function(){
                $(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);
            });
        });
4

1 に答える 1

1

すべての無線に同じ名前を付けて、そのうちの 1 つだけを選択できるようにする必要があります。

<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />
<input name="foo" type="radio" />
于 2012-12-21T11:44:48.060 に答える