更改单选按钮的类/功能

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>

我不确定如何编写 javascript 来实现我想要的。有任何想法吗？我正在使用 Laravel 4 框架。

Answer 1

你可以这样做：

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

因此，每次点击 facebook-likes 类下的列表项时，都会向该列表项添加一个类。

或者从输入的角度来看（必须点击实际输入），您可以通过以下方式实现它：

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

小提琴：http://jsfiddle.net/KyleMuir/22hmN/

编辑

对不起，我误解了你的问题，试试这个：

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

小提琴：http://jsfiddle.net/KyleMuir/22hmN/3/

编辑 2

您说的是标签，但该标签中有图片 - 他们点击图片是否更有意义？但是，如果您确实将标签放在那里而不是 img，它的工作原理是一样的（请参阅：http://jsfiddle.net/KyleMuir/22hmN/6/）

试试这个：

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

小提琴：http://jsfiddle.net/KyleMuir/22hmN/5/

希望这会有所帮助。

Answer 2

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