我的站点中有一个无线电选择,允许用户在多个选项中进行选择。
当页面加载时,我想要一个可以将用户带到下一步的按钮,使其“褪色”并且不起作用。当用户选择其中一个单选选项时,我希望按钮变为活动(新链接)和不透明(不褪色)。
这是我到目前为止的相关代码:
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 框架。