I imagine I'm doing something wrong at a very basic level, but I guess i've been staring at it too long to figure it out. I'm trying to bind simple custom "
enable" and "
disable" methods to both forms and form fields. The idea is that disabling a field disables the field itself, disabling a form disables any corresponding
:submit buttons. However, when I
$.fn.trigger() my custom events, they seem to fire on EVERY form/field on the page, not just the one selected. I've created a
fiddle to demonstrate and my JS is below...
- //Disable FORM event handler
- $('body').on('disable', 'form', function () {
- console.log(this.nodeName);
- var $form = $(this);
- $form
- .find(':submit')
- .trigger('disable');
- return $form;
- });
- //Disable field event handler
- $('form').on('disable', 'input,select,textarea,button', function () {
- console.log(this.nodeName);
- var $field = $(this)
- $field
- .addClass('disabled')
- .prop('disabled', true);
- return $field
- });
- /*
- These fire on ALL input elements on the page????
- */
- $('#my_form').trigger('disable');
- $('#my_text').trigger('disable');