Bootstrap单选按钮

时间:2014-06-03 17:31:19

标签: html twitter-bootstrap button radio-button

我在同一页面上有3组不同的单选按钮。我遇到的问题是,当按下另一个btn组中的按钮时,它将切换上一个或下一个btn组中按钮的状态。他们似乎并不独立。这是代码:

 <div id="file1" class="btn-group" data-toggle="buttons-radio" >
    <button class="btn btn-primary" type="radio" name="radioGroup2" value="yes">Yes</button>
    <button class="btn btn-danger" type="radio"  name="radioGroup2"onClick="$('#mandatory1').val('no');">No</button>
</div>

 <div id="file2" class="btn-group" data-toggle="buttons-radio" >
    <button class="btn btn-primary" type="radio" name="radioGroup" value="yes">Yes</button>
    <button class="btn btn-danger" type="radio"  name="radioGroup" onClick="$('#mandatory2').val('no');">No</button>
</div>

当单击div file1中的按钮时,它会切换div id file2中按钮的状态

我尝试过使用button.js,但没有运气。 我尝试了各种不同的data-toggle =“button”

有什么想法吗?

2 个答案:

答案 0 :(得分:5)

Demo

您的引导单选按钮的HTML结构是错误的。

<div id="file1" class="btn-group" data-toggle="buttons" >
    <label class="btn btn-primary">
        <input type="radio" name="option1" /> Yes
    </label>
    <label class="btn btn-danger">
        <input type="radio" name="option1" /> No
    </label>
</div>


<div id="file2" class="btn-group" data-toggle="buttons" >
    <label class="btn btn-primary">
        <input type="radio" name="option2" /> Yes
    </label>
    <label class="btn btn-danger">
        <input type="radio" name="option2" /> No
    </label>  
</div>

旁白:

您正在使用jQuery;请勿在HTML中使用onClick。您可以设置这样的事件(尽管有一种方法涉及更少的代码)。

$(function(){ 
    $('.btn').button(); // this is for the radio buttons.

    // this replaces your inline JS
    $('#file1 .btn-danger').on('click', function(){
        $('#mandatory1').val('no');
    });
    $('#file2 .btn-danger').on('click', function(){
        $('#mandatory2').val('no');
    });
});

Demo

答案 1 :(得分:3)

这应该可以解决您的问题:

<div id="file1" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active"><input type="radio" name="radioGroup2" value="yes">Yes</label>
    <label class="btn btn-danger"><input type="radio" name="radioGroup2" onclick="$('#mandatory1').val('no');">No</label>
</div>

 <div id="file2" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary"><input type="radio" name="radioGroup" value="yes">Yes</label>
    <label class="btn btn-danger active"><input type="radio" name="radioGroup" onclick="$('#mandatory2').val('no');">No</label>
</div>