Как отключить переключатель бутстрапа?

Question

Я бы хотел отключить выбор переключателя загрузки.

<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary btn-set-or-raise"> 
    <input type="radio" name="options" id="option1" val="option1" >Radio 1 

</label> 
<label class="btn btn-primary btn-set-or-raise"> 
    <input type="radio" name="options" id="option2" val="option2" >Radio 2 
</label> 
<label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3" >Radio 3 
</label> 

Вот JQuery, чтобы сделать это:

$(document).ready(function() { 
    $(".btn-group :input").attr("disabled", true); 
}); 

Но я все еще вижу, что можно нажать, и я получить в качестве проверяемого элемента!

См jsfiddle

Answer 1

ваш код работает отлично отключил атрибут есть на входе радио, но там по-прежнему работает нажмите на этикетке в качестве входного радио в внутри метки.

передать инвалида атрибут маркировать также

$(document).ready(function() { 
 
    $(".btn-group label").attr("disabled", true); 
 
    $(".btn-group :input").attr("disabled", true); 
 
}); 
 

 
function checkSelected() { 
 
    if ($("input[name=options]:checked").length > 0) 
 
    console.log("one is selected!"); 
 
    else 
 
    console.log("none are selected!"); 
 
}

label[disabled]{ 
 
    pointer-events:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<div class="btn-group" data-toggle="buttons"> 
 
    <label class="btn btn-primary btn-set-or-raise"> 
 
    <input type="radio" name="options" id="option1" val="option1">Radio 1 
 

 
    </label> 
 
    <label class="btn btn-primary btn-set-or-raise"> 
 
    <input type="radio" name="options" id="option2" val="option2">Radio 2 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" id="option3">Radio 3 
 
    </label> 
 
</div> 
 
<input type="button" onclick="checkSelected()" value="Check Selected" />

Примечание: Это только предотвращает его, чтобы показать вам его щелчок событие, но если вам нужно, чтобы предотвратить его полностью от щелчка проход pointer-events:none в запрещенная этикетка в css

Answer 2

Добавить класс disabled на подходящую вам этикетку. Вот пример кода:

<div class="btn-group" data-toggle="buttons"> 
<label class="btn btn-primary btn-set-or-raise"> 
    <input type="radio" name="options" id="option1" val="option1" >Radio 1 

</label> 
<label class="btn btn-primary btn-set-or-raise"> 
    <input type="radio" name="options" id="option2" val="option2" disabled="disabled">Radio 2 
</label> 
<label class="btn btn-primary"> 
    <input type="radio" name="options" id="option3" >Radio 3 
</label> 

Я отключил второй вариант Радио

Answer 3

вам нужно добавить disabled класс маркировать, который является родителем кнопки радио:

$(".btn-group label").addClass("disabled"); 

Здесь нами обновлено fiddle

Answer 4

Я надеюсь, что эта помощь вам поможет

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    $("input[type=radio]").attr("disabled", "disabled"); 
    }); 
    </script> 

Answer 5

вы можете использовать HTML атрибут, как это:

<input type="radio" disabled="disabled">

или вы можете использовать JQuery на получить селектор ID:

$("#option1").attr('disabled',true);

---

см. Disabling radio buttons with jQuery