2013-09-27 3 views
0

Я пытаюсь создать кнопку, которая будет действовать как радиоприемник. Значит, если есть много кнопок, то за один раз можно выбрать только один.Toggle button действует как проблема с радио

Но, поскольку я создал все кнопки, теперь можно выбирать только по одному. Я не могу заставить работать как радио. Я имею в виду только одну кнопку. Если выбрано другое, следует отключить его.

любая помощь будет оценена по достоинству.

Вот ссылка скрипку JS, что я сделал до сих пор: http://jsfiddle.net/saifrahu28/eQ744/1/

HTML

<div style="margin:0px auto; margin-top:100px; width:960px;"> 
<a href="#"> 
    <span class="toggleButtonRadio normal">toggle Radio button</span> 
</a> 


<a href="#"> 
    <span class="toggleButtonRadio normal">toggle Radio button</span> 
</a> 


<a href="#"> 
    <span class="toggleButtonRadio normal">toggle Radio button</span> 
</a> 
</div> 

CSS

.toggleButtonRadio , .toggleButton { 
    background: #e1e1e1; 
    text-decoration: none; 
    text-align: center; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: .769em; 
    font-weight: 900; 
    color: #454545; 
    text-transform: uppercase; 
    text-decoration: none; 
    padding: 5px 10px; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    -webkit-box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5); 
    box-shadow: 0px 0px 3px 0px rgba(64, 64, 64, .5); 
    } 

    .toggleButtonRadio:hover, .toggleButton:hover{ 
    background:#d4d4d4; 
    } 

    .toggleButtonRadio.active , .toggleButton.active{ 
    background:#90bf00; 
    color:#fff; 
    } 

    .active:hover{ 
    background:#7ca600; 
    } 

JS

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


}); 

ответ

2

Удалите active класс от других кнопок, и добавить класс к текущей кнопки

var $bts = $('.toggleButtonRadio').click(function() { 
    $bts.removeClass('active'); 
    $(this).addClass("active"); 
}); 

Демо: