如何根據複選框選擇禁用表單

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

}); 

這將禁用類型複選框的所有輸入元素，它們是窗體的子項。