Javascript 在引导程序 3 中禁用单选按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29331261/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable radio button in bootstrap 3?
提问by David Kirkby
How can I disable Bootstrap 3 radio buttons? If I start with the BS3 exampleand add disabled="disabled"to each input element, there are no changes in appearance or behavior:
如何禁用 Bootstrap 3 单选按钮？如果我从BS3 示例开始并添加disabled="disabled"到每个输入元素，则外观或行为没有变化：
<div class="container">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label>
</div>
Demo: JSFiddle.
演示：JSFiddle。
I guess this is because the disabled attribute is only applied to the now-invisible button and not the clickable text label, but I don't see anything in the BS3 docs about this.
我想这是因为 disabled 属性仅适用于现在不可见的按钮而不是可点击的文本标签，但我在 BS3 文档中没有看到任何关于此的内容。
回答by Dhiraj
Add disabledclass to the label like this
disabled像这样将类添加到标签
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary active disabled">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary disabled">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
Here is a demo
这是一个演示
回答by ortonomy
As mentioned by @giammin in the comments to the accepted answer, setting 'disabled' on the input elements doesn't work in 3.3.6 of bootstrap. (Current version at time of publication of this answer).
正如@giammin 在对已接受答案的评论中所提到的，在输入元素上设置“禁用”在引导程序的 3.3.6 中不起作用。（此答案发布时的当前版本）。
I was having exactlythe same issue, and my solution was to use the CSS property "pointer events". This makes sure the element and children are never a target of click events. However this is not a foolproof solution - users can still tab in and use space to click the hidden elements on a desktop browser.
我遇到了完全相同的问题，我的解决方案是使用 CSS 属性“指针事件”。这确保元素和子元素永远不会成为点击事件的目标。然而，这并不是一个万无一失的解决方案 - 用户仍然可以在桌面浏览器上使用 Tab 键并使用空格来单击隐藏的元素。
.disabled-group
{
pointer-events: none;
}
If you set this on your '.btn-group' element, you'll completely disable
如果您在“ .btn-group”元素上设置它，您将完全禁用
<div class="btn-group disabled-group" data-toggle="buttons">
<label class="btn btn-primary disabled">
<input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary disabled">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary disabled">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
The '.disabled' class is then optional - use it for graying out and 'cursor: not-allowed;' property.
' .disabled' 类是可选的 - 用它来变灰和 'cursor: not-allowed;' 财产。
The discussion of the fix solution is at this source: https://github.com/twbs/bootstrap/issues/16703
修复解决方案的讨论是在这个来源：https: //github.com/twbs/bootstrap/issues/16703
回答by Ederico Rocha
For radio button groups, add class disabled to the one you wish disabled. Make sure you have something like this code:
对于单选按钮组，将禁用的类添加到您希望禁用的类。确保你有这样的代码：
$('.btn-group').on("click", ".disabled", function(event) {
event.preventDefault();
return false;
});
This will get all your .disabled classed buttons inside the button groups also disabled. This works also for radio type button groups.
这将使按钮组内的所有 .disabled 分类按钮也被禁用。这也适用于单选按钮组。
回答by George Siggouroglou
You can use the above to disable an input[type='radio'] that is inside a label (bootstrap 3 style),
您可以使用上面的方法禁用标签内的 input[type='radio']（引导程序 3 样式），
$("input[name='INPUT_RADIO_NAME']").prop("disabled", true);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "none");
The above to enable again,
以上再次启用，
$("input[name='INPUT_RADIO_NAME']").prop("disabled", false);
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "auto");
You can also extend JQuery and create a dummy disable method (that you could upgrade with more functionality) like this,
您还可以扩展 JQuery 并创建一个虚拟禁用方法（您可以使用更多功能升级），如下所示，
(function ($) {
$.fn.disableMe = function () {
// Validate.
if ($.type(this) === "undefined")
return false;
// Disable only input elements.
if ($(this).is("input") || $(this).is("textarea")) {
// In case it is a radio inside a label.
if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
$("input[name='safeHtml']").closest("label").addClass("disabled");
$(this).closest("div").css("pointer-events", "none");
}
// General input disable.
$(this).prop("disabled", true);
}
};
$.fn.enableMe = function () {
// Validate.
if ($.type(this) === "undefined")
return false;
// Enable only input elements.
if ($(this).is("input") || $(this).is("textarea")) {
// In case it is a radio inside a label.
if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
$("input[name='safeHtml']").closest("label").removeClass("disabled");
$(this).closest("div").css("pointer-events", "auto");
}
// General input enable.
$(this).prop("disabled", false);
}
};
$.fn.toggleDisable = function () {
if ($.type(this) === "undefined")
return false;
// Toggle only input elements.
if ($(this).is("input") || $(this).is("textarea")) {
var isDisabled = $(this).is(":disabled");
// In case it is a radio inside a label.
if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) {
$("input[name='safeHtml']").closest("label").toggleClass("disabled");
$(this).closest("div").css("pointer-events", isDisabled ? "auto" : "none");
}
// General input enale.
$(this).prop("disabled", !isDisabled);
}
};
}(jQuery));
Usage example,
用法示例，
$("input[name='INPUT_RADIO_NAME']").disableMe();
$("input[name='INPUT_RADIO_NAME']").enableMe();
$("input[name='INPUT_RADIO_NAME']").toggleDisable();
回答by Rana Aalamgeer
In bootstrap if you want to disabled any input type or button, You just have to add bootstrap's .disabled class then your button become disabled.
在引导程序中，如果您想禁用任何输入类型或按钮，您只需添加引导程序的 .disabled 类，然后您的按钮将被禁用。
Like this
像这样
<input type="radio" class="btn btn-primary disabled">Primary Button</button>
