StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you want a button to dispatch click events, it must not be disabled (i.e., it must not have the attribute 'disabled').</p> <p>If what you want is for the button to <em>appear</em> disabled while acceptCheckbox is clicked, then you need a different approach. Namely, you need to make it so when acceptCheckbox is checked, a listener is attached to proceedButton which displays the alert and then prevents submission (via the event's preventDefault() method). When it is unchecked, that listener is removed and the button behaves normally.</p> <p>This course of action fits with the principles of the <a href="http://en.wikipedia.org/wiki/Observer_pattern" rel="nofollow">observer/event design pattern</a>: Sometimes you want to disable event dispatching entirely, which is what the attribute 'disabled' reflects, but sometimes you want merely catch an event and prevent it from doing whatever it normally does, which is what preventDefault() allows you to do.</p> <p>Here's some code which I believe reflects this approach, given the situation that the OP had (which has long been resolved, but still might be useful for future readers).</p> <pre><code>var disabledProceedButtonFn = function(e) { alert('Please check the "I accept" check box before submitting this form.'); e.preventDefault(); } var proceedButton = $("input#proceedButton"); var disableProceedButton = function() { proceedButton.addClass('disabled'); proceedButton.on('click', disabledProceedButtonFn); // add the listener } var enableProceedButton = function() { proceedButton.removeClass('disabled'); proceedButton.off('click', disabledProceedButtonFn); // remove the listener } $("input#acceptCheckbox").on('change', function() { if ($(this).is(':checked')) { enableProceedButton(); } else { disableProceedButton(); } }); disableProceedButton(); // 'Disable' the button on page load </code></pre> <p>Note: You will need CSS that makes a button appear disabled when given the 'disabled' class. Some CSS frameworks support this out of the box, such as Twitter Bootstrap.</p> <p><em>I know this is an old thread, but I found myself dealing with this very issue this morning, and thought this might help future readers.</em></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload