Enable or Disable Progressbar with a Checkbox

The checkbox controls whether the Progressbar widget is enabled. This preserves the original use of .prop("checked") and modernizes the event binding to .on("change").

HTML Top ↑

<label>
    <input type="checkbox" id="ckb" checked>
    Enable
</label>

<div id="progress_bar"></div>

jQuery Top ↑

$( function () {
    const $bar = $( "#progress_bar" );

    $bar.progressbar({
        value: 40,
        max: 100
    });

    $( "#ckb" ).on( "change", function () {
        const enabled =
            $( this ).prop( "checked" );

        $bar.progressbar(
            enabled ? "enable" : "disable"
        );
    });
});

← Progressbar tutorial Change value with buttons →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: