Question

我在jquery mobile中制作3个按钮让我们说（咖啡，可乐，水）水平分组，我希望它们的行为就像我点击其中一个（咖啡）时点击的按钮会将其外观改为点击状态而我不会能够再次点击它（请注意，当我禁用按钮时，它也会将其颜色更改为灰色）。然后当我点击可乐时，咖啡恢复正常，可乐转为点击状态。

<div id="ui-26">
<div class="ui-segment" data-role="controlgroup" data-type="horizontal" >
    <input type="button" name="segment-coffee" id="segment-coffee" class="custom" value="coffee" />
    <input type="button" name="segment-cola" id="segment-cola" class="custom" value="cola" />
    <input type="button" name="segment-water" id="segment-water" class="custom" value="water" />
</div>
</div>

我尝试使用单选按钮，但我无法在其上分配背景图像，所以我决定使用分组按钮。应该如何在jquery上完成？提前谢谢！

Answer 1

我认为http://jsfiddle.net/rcNfJ/2/正是您要找的？我刚刚使用attr("disabled")，但你可以做任何你想做的事情（改变他们的CSS，操纵数据等）。

Answer 2

http://jqueryui.com/demos/button/#radio

我认为这就是你要搜索的内容：）

您可以使用图标选项为其设置图标。

编辑：这是另一种解决方案：）

$(function() {
    $('#ui-26 > .ui-segment > input').click(function(){
        if($(this).is(':disabled')) return;
        $('#ui-26 > .ui-segment > input').prop('disabled',false);
        $(this).prop('disabled',true);
    });
});

单击后，jquery分组按钮会更改外观

2 个答案: