Enable or Disable Progress bar by using Checkbox

Enable

HTML

<input type=checkbox id='ckb' checked> Enable <div id="progress_bar"></div> 

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#progress_bar" ).progressbar({
  value: 40,
  max:100,
  min:0
});
//////Checkbox change function///////////
$("#ckb").change(function(){
  var ckb_status = $("#ckb").prop('checked');
if(ckb_status){
$("#progress_bar").progressbar( "enable" );
}else{
$("#progress_bar").progressbar( "disable" );
}
});
///////////////
})
</script>

  • Video Tutorial on JQuery UI Progress Bar


Setting value of Progress bar

Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer