Question

我正在开发一个基于Bootstrap的应用程序，而我正试图让多个单选按钮在多行中工作。不幸的是，它不起作用;当同一组中的不同按钮放在不同的行中时，它们的行为不正确。

他们如何失败取决于我是如何准确地实施它们的。

这些按钮仍然显示单选按钮（我不想要），在btn-group div中只能按下一个按钮，即使我已经定义了两组不同的按钮：

        <div class="btn-group" data-toggle="buttons">
            <div class="row">
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="1"/>Set 1, Option 1
                    </label>
                </div>
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="1"/>Set 2, Option 1
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="2"/>Set 1, Option 2
                    </label>
                </div>
                <div class="col-xs-6">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="2"/>Set 2, Option 2
                    </label>
                </div>
            </div>
        </div>

这些按钮看起来正确，但一旦按下，请保持按下。

        <div class="btn-group">
            <div class="row">
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="1"/>Set 1, Option 1
                    </label>
                </div>
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="1"/>Set 2, Option 1
                    </label>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_1" value="2"/>Set 1, Option 2
                    </label>
                </div>
                <div class="col-xs-6" data-toggle="buttons">
                    <label class="btn btn-primary">
                        <input type="radio" name="test_2" value="2"/>Set 2, Option 2
                    </label>
                </div>
            </div>
        </div>

那么，我如何让这些按钮像单选按钮一样？我只是误解了这个功能应该做什么？

Answer 1

我有同样的问题，谷歌搜索没有找到任何答案。进入CSS看看他们是如何解决它的，他们使用了：

[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
  display: none;
}

由于我没有在没有.btn的地方使用任何无线电按钮，我将其添加到我的代码中，它就像一个魅力：

.btn > input[type="radio"] {
  display: none;
}

如果您正在使用单选按钮并希望偶尔将它放在按钮中，只需添加一个类，并在想要隐藏单选按钮时将.btn更改为该类：

.btn-custom-home-made > input[type="radio"] {
  display: none;
}

Answer 2

您可以使用此回复：）

    <div class="well">
        <div class="btn-group" id="choice" data-toggle="buttons">
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option1" value="1"> Option 1
            </label>
            <label class="btn btn-primary">
                <input type="radio" name="options" id="option2"  value="2" > Option 2
            </label>

        </div>
    </div>

var value_check = $（＆＃39;输入[type = radio] [name = options]：选中＆＃39;）。attr（＆＃39; value＆＃39;）;

警报（value_check）;

引导单选按钮不能在div上工作

2 个答案: