如何根据复选框选择禁用表单

Question

我有一个表单，其中包含多个复选框，如果选中某个方框，我想禁用表单。我将在我的网站上多次出现这种情况，我想知道是否有比我目前尝试的更好的方式（哪个不能正常工作）。如果我想多次使用这个相同的禁用函数，我应该创建一个类'disable'吗？谢谢！

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" /> 
      four</label> 
     <br /> 
     <label> 
      <input type="checkbox" name="disabler" value="five" id="disabler_4" /> 
      five</label> 
     <br /> 
     </p> 
    </form> 

Answer 1

我无法禁用一个整体的形式，但每一个内它元素：

有一个虚拟更新例如这里： http://jsfiddle.net/marcosfromero/S2SxN/

更新 的代码应该适应您的需求，并把它更实用，因为一旦你禁用了整个窗体，将无法再次启用它：

$('#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'); 
    } 
}); 

Answer 2

这可以改良效果：

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

这段代码你不需要修改代码为每个表单

Answer 3

你不能真正禁用一个表格中，disable属性仅用于输入。你想要做的是这样的：

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

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

    return true; 

}); 

这将不会让表单提交时，复选框被选中。

编辑的评论澄清，这将禁用所有输入并选择复选框时选择。

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

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

Answer 4

你可以把一个类上的所有复选框的要禁用窗体，并使用此代码：

$('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; 
}); 

Answer 5

好吧，那么，根据您的回应：

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

}); 

这将禁用类型复选框的所有输入元素，它们是窗体的子项。