`

checkBox点击相应内容变恢色

 
阅读更多

有时候在做registration的时候,会遇到点击agree的时候为可点击,不点击agree的checkbox的时候,为灰色不可点击。

html代码如下:

<p>
   <input id="agree" name="agree" value="1" onclick="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" onclick="onAgreeChecked()" name="bit" value="32" type="radio">
  <label for="32">32-bit</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input id="64" onclick="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" onclick="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;
}

 

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics