如何使用 jquery 使按钮充当单选按钮？答案

【问题标题】：How to make buttons act as radiobuttons with jquery?如何使用 jquery 使按钮充当单选按钮？
【发布时间】：2011-11-18 10:34:42
【问题描述】：

我有两组按钮，我喜欢让按钮像单选按钮一样，所以只能选择一个。

例如：

<div id="top">
    <div class="span2">                         
    <input type=button  value="10" id="top_A" name="top_A" onclick="yourPick(this)"/>
    </div>
    <div class="span2">
    <input type=button  value="20" id="top_B" name="top_B" onclick="yourPick(this)"/>
    </div>
</div>
<div  id="bottom">
    <div class="span2">                         
    <input type=button value="30" id="top_C" name="top_C" onclick="yourPick(this)"/>
    </div>
    <div class="span2">
    <input type=button  value="40" id="top_D" name="top_D" onclick="yourPick(this)"/>
    </div>
</div>

因此您可以在顶部选择按钮 10 或 20，而在 div 底部选择按钮 30 或 40。

有什么建议吗？

ps：

function yourpick(pick){
    var pValue= pick.value;
    alert(pValue);
    $('#topPick').val(pValue); 
    $('#bottomPick').val(pValue); 
}

【问题讨论】：

jquery ui 中的jqueryui.com/demos/button/#radio 怎么样？
单选按钮有什么问题？
@charpsi ，目前界面是基于按钮的。所以对于用户来说，我喜欢一直使用按钮。马特看起来很有希望我会检查一下
@matt 我正确地假设您的链接使用单选按钮，通过在开始 - 结束标记之间添加标签来看起来像按钮？？
@alex，是的，它们就像单选按钮一样，但它们的样式是按钮。您可以只使用 jquery 主题滚轮来随意设置它的样式。然后使用您添加标签，介于两者之间的将是显示的文本。因此，如果有人没有启用 javascript，这是有效的 HTML 和兼容的。

标签： jquery button

【解决方案1】：

我从您的示例中删除了 onclick 属性，但您可以对组中的选定按钮使用属性 disabled 并启用所有其他按钮。这就是它们的行为方式，就像单选按钮一样。

$(document).ready( function () {

    handleGroup('#top .span2 input');
    handleGroup('#bottom .span2 input');

});


function handleGroup(selector) {
    var inputs = $(selector);

    inputs.live('click', function () {

        //this returns id if needed
        //alert($(this).attr('id'));

        inputs.attr('disabled','');

        $(this).attr('disabled','disabled');

    });
}

【讨论】：

我也在尝试您的建议，但按钮似乎没有切换。我的意思是当我选择 #top 按钮之一时，我无法选择另一个。

【解决方案2】：

即使我同意 user832715 关于按钮禁用属性的使用。

$("#selectButton1DivA").attr("disabled", false/true");

【讨论】：