Question

我有一个充满复选框的表单，如果选中某个盒子，我想禁用该表单。我会在我的网站上多次出现这种情况，我想知道是否有比我正在尝试的更好的方法（这是不行的）。如果我想多次使用同样的禁用功能，我应该创建一个类'禁用'吗？谢谢！

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

那么，根据您的回复：

$(document).ready(function()
{
    $('#disabler_0').click(function()
    {
      $('#form1 input[type="checkbox"]').not("#disabler_0").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

这可以改善：

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

通过此代码，您不需要为每个表单修改代码

Answer 5

您可以在要禁用表单的所有复选框上放置一个类并使用此代码：

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

如何基于复选框选择禁用表单

5 个答案: