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-like类下的列表项时，它都会向该列表项添加一个类。

或者从输入角度（必须点击实际输入）你可以用这样的东西来实现它：

$('.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');
});

在电台点击时更改按钮的类/功能

2 个答案: