html/bootstrap - 一个输入组中的复选框和单选框

Question

我想做的是让您可以 select 选项 1 或任意数量的其他选项。所以选项1应该是"radio"，其他的应该是正常的"checkboxes".

我的代码：

<div class="input-group">
    <label>Presentation:</label>
    <input type="radio" name="presentation" id="presentation-0" value="correct">
       Option 1
    <input type="checkbox" name="presentation" id="presentation-1" value="Incorrect1">
       Option 2
    <input type="checkbox" name="presentation" id="presentation-2" value="Incorrect2">
       Option 3
    <input type="checkbox" name="presentation" id="presentation-3" value="Incorrect3">
       Option 4    
</div>

如果我这样做，您仍然可以 select 选项 1 与其他选项同时使用。任何人都知道我怎样才能得到想要的结果？（因此当您 select 另一个选项时，选项 1 变为未 selected/当您 select 选项 1 时，选项 2-4 未 selected）

Answer 1

您可以通过添加属性和删除属性 jquery 功能轻松完成。
添加 2 class，例如在您的无线电输入中添加 class="radio"，并在您的复选框输入中添加 class=check 然后尝试下面的 jquery 代码。

$('.radio').click(function(){
    $(this).attr('checked', 'checked');
    $('.check').removeAttr('checked');
})
$('.check').click(function(){
   $(this).attr('checked', 'checked'); 
   $('.radio').removeAttr('checked');
})

html/bootstrap - 一个输入组中的复选框和单选框

html/bootstrap - checkbox and radio in the one input-group

html

checkbox

radio-button

twitter-bootstrap