Sono sicuro che quello che sto cercando di fare è abbastanza semplice, ma ho bisogno di aiuto.Cambia radio bootstrap al momento del click
Ho tre pulsanti di opzione;
- attiva
- inattivo
- non trovato
Id piace cambiare il (Bootstrap v3) classe dei pulsanti quando si fa clic. Hanno tutti una classe predefinita di btn-default
. Tuttavia quando cliccato mi piacerebbe quindi avere le seguenti classi;
- attivo (
btn-success
) - inattiva (
btn-warning
) - non trovato (
btn-danger
)
uno deve essere selezionata solo in qualsiasi momento, e solo uno dovrebbe essere colorato in uno qualsiasi tempo.
Il mio codice finora è sotto, penso di essere quasi arrivato. Se qualcuno potesse offrire qualche consiglio sarebbe bello.
Here is a link to my jsfiddle.
$(document).ready(function() {
$('#option1').change(function() {
$(this).removeClass("btn-default").addClass("btn-success");
});
$('#option2').change(function() {
$(this).removeClass("btn-default").addClass("btn-warning");
});
$('#option3').change(function() {
$(this).removeClass("btn-default").addClass("btn-danger");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="options" id="option1" value="1" autocomplete="off">Active
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" value="2" autocomplete="off">Inactive
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" value="3" autocomplete="off">Not Found
</label>
</div>
Se si esegue $ (this) .removeClass(); con i backets vuoti, cancella tutte le classi. Prova semplicemente $ (this) .removeClass(). AddClass ("newClass"). Questo dovrebbe funzionare – Fearodin