如何确保按下的按钮保持“按下状态”

Question

我正在使用Bootstrap Group Button类，发现在我的代码中，如果按下按钮，按钮会在几秒钟后弹起...

我该如何确保它保持按下状态？

<div class="row">
<div class="col-md-12">
    <div class="form-group">
        <label>Stage of business:</label>
        <br />
        <div class="btn-group">
            <button class="btn btn-default"><span class="glyphicon">Start-up</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Growth Company</span>
            </button>
            <button class="btn btn-default"><span class="glyphicon">Mature Company</span>
            </button>
        </div>
    </div>
</div>

谢谢。

---

更新

我添加了活动状态的CSS，发现当我点击按钮时，整个页面会刷新，这就是为什么按钮会失去活动CSS类的原因。 如何仅禁用这3个按钮的提交操作？ 因为我在这个表单中还有一个需要触发提交操作的按钮。

$('.btn-stage').click(function () {
            $(this).toggleClass("active"); //addCss("active");
        })

---

更新3

另外，在这个按钮组中，只能选择一个按钮，如果选择其他按钮，则其余按钮应反弹回来。

谢谢。

- Franva

---

你知道按钮被按下后应用的CSS类吗？ - Youness

嗨@Youness，我检查了一下Twitter BootStrap网站上的按钮，没有发现任何新的CSS类被添加。那么呢？ - Franva

尝试添加 activ 然后看看它会给出什么。 - Youness

嗨@Youness，请查看我的更新，谢谢。 - Franva

希望我的回答能有所帮助。 - Youness

Answer 1

将活动类添加到按钮中应该保持其“按下”样式。

$('.btn').click(function(e) {
    e.preventDefault();
    $(this).addClass('active');
})

希望这有所帮助。

- Scott L

---

嗨，它仍然触发了刷新操作，请查看我的更新部分，谢谢。 - Franva

@Franva，我已经更新了我的示例，展示了如何停止按钮的默认操作。 - Scott L

嗨，Scott，我发现这个允许我选择多个按钮，但我只想允许用户最多选择一个按钮。 - Franva

@Franva 所以你实际上想要在点击一个按钮后禁用所有按钮？我显然误解了你的问题。像这样处理禁用 - http://jsfiddle.net/ct8yukjh - 但是禁用按钮不会使它们看起来“按下”，而是变灰。如果你想让所有按钮看起来“按下”但不能点击，那么更像这样的东西就是你想要的 - http://jsfiddle.net/ct8yukjh/1。它添加了活动类来使它们看起来被按下，然后从它们中解除了点击功能。 - Scott L

Answer 2

Demo

js

$('.Button').click(function() {
    $(this).toggleClass("active");
});

css

.Button:active, .active {
    background-color:red;
    color: white;
}

html

<button class='Button'>Button</button>

---

最终演示

JavaScript

$('.Button').click(function(e) {
    $('.Button').not(this).removeClass('active');    
    $(this).toggleClass('active');
    e.preventDefault();
});

html

<button class='Button'>Button</button>
<button class='Button'>Button</button>
<button class='Button'>Button</button>

css

.Button:active, .active {
    background-color:red;
    color: white;
}

- 4dgaurav

---

嗨，它仍然触发了刷新操作，请查看我的更新部分，谢谢。 - Franva

我能够正确理解您的意思。您能解释一下“触发刷新操作”的含义吗？ - 4dgaurav

嗨，这意味着当单击页面上的按钮时，页面会刷新。 - Franva

Answer 3

添加一个类来定义它们，比如说"nosubmit"，像这样：

    <button class="btn btn-default nosubmit"><span class="glyphicon">Start-up</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Growth Company</span>
    </button>
    <button class="btn btn-default nosubmit"><span class="glyphicon">Mature Company</span>
    </button>

然后执行这个：

    $('.nosubmit').click(function() {
        $(this).addClass("active");
        $('.nosubmit').unbind( "click" );// this will take off the click handler from all the nosubmit buttons
// if you want it to be to changed back whene you click again use toggleClass instead
         return false;
    });

- Youness

---

你好Youness，这段代码允许用户选择多个按钮，但我只想允许用户最多选择一个按钮。 - Franva

Answer 4

你把按钮放在哪里了？是在表单里吗？如果按钮不在表单标签内，我可以轻松地添加/更改按钮的类为active。你可以使用以下代码：

$(document).ready(function(){
        $('.btn-stage').click(function () {
            $('.btn-stage.active').removeClass("active");
            $(this).addClass("active");
        })
    });

但如果它在表单标签中，你需要在按钮元素上添加type='button'。这样它就会像这样：

<form>
    <div class="row">
        <div class="col-md-12">
                <div class="form-group">
                    <label>Stage of business:</label>
                    <br />
                    <div class="btn-group">
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Start-up</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Growth Company</span>
                        </button>
                        <button class="btn btn-default btn-stage" type='button'><span class="glyphicon">Mature Company</span>
                        </button>
                    </div>
                </div>
        </div>
    </div>
</form>

上面的JavaScript仍然有效。当您在表单中有一个按钮，且未指定其类型时，它将自动设置为type='submit'

- Still Newbie

---

是的，我确实使用了按钮。请看我的帖子。除了你把一个表单放在所有东西的外面，我也没有发现任何区别。 - Franva

你尝试给你的按钮添加 type='button' 属性了吗？ - Still Newbie

不，我直接使用按钮。像这样<button></button>。 - Franva