有时候在做registration的时候,会遇到点击agree的时候为可点击,不点击agree的checkbox的时候,为灰色不可点击。
html代码如下:
<p>
<input id="agree" name="agree" value="1" οnclick="onAgreeChecked()" type="checkbox">
<label id="agreeLabel" for="agree">I have read and agree with the above terms and conditions</label>
</p>
<p id="bitpicker" style="">
<input id="32" οnclick="onAgreeChecked()" name="bit" value="32" type="radio">
<label for="32">32-bit</label>
<input id="64" οnclick="onAgreeChecked()" name="bit" value="64" type="radio">
<label for="64">64-bit</label>
</p>
<p>
<a name="#win-bundle" bundle="true" href="" class="button disabled" id="downloadForRealz" οnclick="return onDownloadForRealz(this);">Download Eclipse ADT with the Android SDK for Windows</a>
</p>
js代码如下:
function onAgreeChecked() {
/* verify that the TOS is agreed and a bit version is chosen */
if ($("input#agree").is(":checked") && $("#bitpicker input:checked").length) {
/* if downloading the bundle */
if ($("#downloadForRealz").attr('bundle')) {
/* construct the name of the link we want based on the bit version */
linkId = $("a#downloadForRealz").attr("name") + $("#bitpicker input:checked").val();
/* set the real url for download */
$("a#downloadForRealz").attr("href", $(linkId).attr("href"));
}
/* reveal the download button */
$("a#downloadForRealz").removeClass('disabled');
} else {
$("a#downloadForRealz").addClass('disabled');
}
}
css样式:
.button.disabled, .button.disabled:hover, .button.disabled:active{
background: none repeat scroll 0 0 #ebebeb;
border-color: #999;
color: #999 !important;
cursor: default;
}