Question

如何禁用已选择的按钮。假设我有2个按钮，“ON”＆amp; “OFF”。

现在，如果选择了“ON”按钮，则在选择“OFF”按钮之前不应再次选择“ON”按钮。

<form action="myclass.php" method="post">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default btn-xs myOnbutton">
            // myOnbutton is the button name
            <input type="radio" autocomplete="off"> ON
        </label>
        <label class="btn btn-default btn-xs myOffbutton">
            // myOffbutton is the button name
            <input type="radio" autocomplete="off"> OFF
        </label>
    </div>
</form>

所以主要目的是禁用所选的按钮。有谁知道如何解决这个问题！谢谢你提前。

Answer 1

尝试此变体jsFiddle：

$(function () {
    var onButton = $(".btn-group .btn:eq(0)");
    var offButton = $(".btn-group .btn:eq(1)");

    onButton.on("click", function () {
        if (!onButton.is("disabled")) {
            offButton.attr("disabled", false);
            onButton.attr("disabled", true);
        }
    });
    offButton.on("click", function () {
        if (!offButton.is("disabled")) {
            onButton.attr("disabled", false);
            offButton.attr("disabled", true);
        }
    });
});

Answer 2

// https://jsfiddle.net/243mbpwo/2/

var inputs = document.getElementsByTagName("input");
var onButton = inputs[0];
var offButton = inputs[1];

onButton.addEventListener("click", function () {
    this.setAttribute("disabled", "disabled");
});

offButton.addEventListener("click", function () {
    onButton.removeAttribute("disabled");
});

Answer 3

如果你已经在使用bootstrap - http://getbootstrap.com/javascript/#buttons-checkbox-radio

，为什么不尝试这个呢？

Answer 4

编写如下代码：

<div class="btn-group" data-toggle="buttons">
  <input type="radio" name="toggle" value="on">ON</br>
  <input type="radio" name="toggle" value="off">OFF</br>
</div>

这种方法你不需要javascript或jQuery。

禁用所选按钮

4 个答案: