Измените класс/функциональность кнопки при нажатии на радио

Question

У меня есть выбор радио на моем сайте, который позволяет пользователю выбирать один из нескольких вариантов.

Когда страница загружается, мне нужна кнопка, которая приведет пользователя к следующему шагу, чтобы «исчезнуть» и не работать. Когда пользователь выбирает один из параметров радио, я хотел бы, чтобы кнопка стала активной (новая ссылка) и непрозрачной (не выцветшей).

Вот соответствующий код, который я до сих пор:

CSS:

#fan_likes .button { 
    -moz-border-radius: 4px; 
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 -1px 1px rgba(0,0,0,.28); 
    -webkit-border-radius: 4px; 
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 1px rgba(0,0,0,.28); 
    background-color: #00d073/*#1abc9c*/; 
    border: 1px solid #009d64; 
    border-color: rgba(0,0,0,.1); 
    border-radius: 4px; 
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 1px rgba(0,0,0,.25); 
    color: #fff!important; 
    cursor: pointer; 
    font-size: 17px; 
    font-weight: 400; 
    margin: 0; 
    padding: 8px 17px 11px; 
    text-align: center; 
    text-shadow: 0 1px 0 rgba(0,0,0,.2); 
    vertical-align: middle; 
    text-decoration: none; 
    display: inline-block; 
} 

.faded { 
    opacity:0.2; 
} 

HTML/PHP:

<center> 
<div id="fan_likes"> 
<a href="" class="button faded">Continue</a> 
<ul class="facebook-likes"> 
@foreach($likes_ids as $likes_id) 

<li> 
{{$likes_names[$offset]}} 
<br> 
<input type="radio" name="like" id="{{$likes_id}}" class="input-hidden" value="{{$likes_id}}" /> 
<label for="{{$likes_id}}"><img src="/assets/images/loader.gif" data-src="https://graph.facebook.com/{{$likes_id}}/picture?width=200&height=200" width="150" height="150" alt="{{$likes_names[$offset]}}"/></label> 
</li> 

<?php $offset++; ?> 
@endforeach 
</ul> 
</div> 
</center> 

Javascript:

<script type="text/javascript"> 
$(".input-hidden").find('input:radio').click(function() { 
    $("#fan_likes").find('a').removeClass('faded'); 
}); 
</script> 

Я не уверен, как написать javasc чтобы получить то, что я хочу. Есть идеи? Я использую структуру Laravel 4.

Answer 1

Вы можете сделать что-то вроде этого:

$('.facebook-likes li').on('click', function() { 
    $(this).addClass('faded'); 
}); 

Таким образом, каждый элемент списка под классом facebook-подобный щелкает будет добавить класс к этому элементу списка.

или входной точки (необходимо нажать на вход фактического) вы могли бы достичь его с чем-то вроде этого:

$('.facebook-likes li input').on('click', function() { 
    $(this).parent().addClass('faded'); 
}); 

Fiddle: http://jsfiddle.net/KyleMuir/22hmN/

EDIT

К сожалению, я неправильно понял ваш вопрос, попробуйте следующее:

$('.facebook-likes li input').on('click', function() { 
    $('#fan_likes a.faded').removeClass('faded'); 
}); 

Fiddle: http://jsfiddle.net/KyleMuir/22hmN/3/

EDIT 2

Вы говорите, что ярлык, но есть изображения в этой наклейке - он будет делать больше смысла, что они щелкните изображение? Тем не менее, если вы поместить ярлык там вместо IMG он работает точно так же (см: http://jsfiddle.net/KyleMuir/22hmN/6/)

Попробуйте это:

$('.facebook-likes li img').on('click', function() { 
    $('#fan_likes a.faded').removeClass('faded'); 
}); 

Fiddle: http://jsfiddle.net/KyleMuir/22hmN/5/

Надеется, что это помогает.

Answer 2

$('.facebook-likes label').on('click', function(e) { 
    $("#fan_likes").find('a').removeClass('faded'); 
});