How to disable a form based on a check box selection

I have a form full of checkboxes and I would like to disable the form if a certain boxed is checked. I will have this appear multiple times on my site and I was wondering if there is a better way than what I'm currently trying (which isn't working). If I want to use this same disable function multiple times, should I create a class 'disable'? Thanks!

JS

$(document).ready(function()
{
    $('#disabler_0').click(function()
    {

    $('[name*=form1]').attr('disabled', 'disabled')
    });

});

html

<form id="form1" name="form1" method="post" action="">
      <p>
        <label>
          <input type="checkbox" name="disabler" value="one" id="disabler_0" />
          one</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="two" id="disabler_1" />
          two</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="three" id="disabler_2" />
          three</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="four" id="disabler_3" /&g开发者_如何转开发t;
          four</label>
        <br />
        <label>
          <input type="checkbox" name="disabler" value="five" id="disabler_4" />
          five</label>
        <br />
      </p>
    </form>

I wasn't able to disable a whole form, but every inner element on it:

There's a dummy updated example here: http://jsfiddle.net/marcosfromero/S2SxN/

Updated The code should be adapted to your needs and turn it more usable because once you disabled the whole form, you can't enable it again:

$('#disabler_0').click(function() {
    var elements = $(this).closest('form').find('input, select textarea').not('#disabler_0');
    if(this.checked) {
        elements.attr('disabled', 'disabled');
    } else {
        elements.removeAttr('disabled');
    }
});

Okay then, based on your response:

$(document).ready(function()
{
    $('#disabler_0').click(function()
    {
      $('#form1 input[type="checkbox"]').not("#disabler_0").attr('disabled', 'disabled')
    });

});

This will disable all input elements of type checkbox that are children of the form.

You cannot actually disable a form, the disable attribute is only used for inputs. What you want to do is something like this:

$("#form1").live("submit", function() {

    if ($("#disabler_0").is(":checked"))
        return false;

    return true;

});

This will not let the form submit when the check-box is checked.

Edit for the comment clarification, this will disable all the inputs and selects when the check-box is selected.

$('#disabler_0').live("click", function() {

    var form = $(this).parents("form");
    var inputs = $("input,select,textarea", form);
    inputs.attr("disabled", "disabled");
});

this can be improvment:

$(function() {
    $('.disabler').click(function() {
        $(this).parent('form').attr('disabled', 'disabled');
    });
});

by this code you dont need modify code for each form

You could put a class on all of the checkboxes that you want to disable the form and use this code:

$('input.disabler').click(function() {
    var form = $(this).closest('form');
    var isChecked = $(this).is(':checked');
    form.toggleClass('disabled', isChecked);
    if (isChecked)
         form.find(':input').attr('disabled', 'disabled')
});

$('#form1').bind('submit', function() {
    if ($(this).hasClass('disabled'))
         return false;
});