我在同一个页面上有 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"
有什么想法吗?
最佳答案
您的 Bootstrap 单选按钮的 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');
});
});
关于html - Bootstrap 单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24021442/