私のサイトには、ユーザーが多数のオプションの中から選択できるラジオの選択肢があります。
ページが読み込まれると、ユーザーを次のステップに導くボタンが「フェード」して機能しないようにしたいと思います。ユーザーがラジオ オプションの 1 つを選択すると、ボタンがアクティブ (新しいリンク) になり、不透明 (フェードしない) になります。
ここに私がこれまでに持っている関連コードがあります:
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 フレームワークを使用しています。