Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <title>[jQuery] Toggle Button</title>
        <base href="https://www.castopulence.org/" />
        <link href="theme/jquery-ui-1.8.custom.css"
                    rel="stylesheet" type="text/css" />
        <style type="text/css">
            fieldset { border: 3px dotted black; }
        </style>
    </head>
    <body>
        <div>
            <label for="foo">Lock</label>
            <input type="checkbox" id="foo" />
            <span id="foo_checked"></span>
            <p>--</p>
            <div>
                <input type="checkbox" id="attempt_prevent" />
                <label for="attempt_prevent">Attempt to prevent text selection within the button?</label>
​
            </div>
            <button>Clear Interval</button>
            <ul id="foo_change_log"></ul>
        </div>
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
                ></script>
        <script type="text/javascript"
                src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"
                ></script>
    </body>
</html>
​
​
 
jQuery(function() {
    var foo = jQuery("#foo");
    
    foo.button();
​
    var foo_label = jQuery("label[for=foo]");
    var attempt_prevent = jQuery("#attempt_prevent");
​
    foo_label.mousedown(function(E) {
        if(attempt_prevent.prop('checked'))
        {
            return false;
        }
    });
​
    var foo_change_log = jQuery("#foo_change_log");
    
    foo.change(function() {
        foo_change_log.append("<li>" 
            new Date().toString() +
            ": " +
             foo.prop('checked') +
            "</li>");
    });
​
    var foo_checked = jQuery("#foo_checked");
​
    var interval = setInterval(function() {
        foo_checked.text(foo.prop('checked'));
    }, 1);
​
    jQuery("button").click(function() {
        clearInterval(interval);
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers