Question

我需要有关jQuery和多数组表单的帮助。我的表格如下：

<form>
<div class="box" style="border:1px #000 solid">
    <input type="checkbox" name="clause[3][chk]" class="clause_check">
    <input type="text" name="clause[3][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled">
    This is a clause with a text field <input class="clause_input" name="clause[3][field][-_transfer_charges_-]" disabled="disabled" type="text"> to be filled in.
</div>
<div class="box" style="border:1px #000 solid">
    <input type="checkbox" name="clause[2][chk]" class="clause_check">
    <input type="text" name="clause[2][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled">
    This is a clause without a text box to fill.
</div>
<div class="box" style="border:1px #000 solid">
    <input type="checkbox" name="clause[1][chk]" class="clause_check">
    <input type="text" name="clause[1][number]" class="clause_number numericonly" maxlength="2" size="2" disabled="disabled"> 
    Another clause with a 
    <input class="clause_input" name="clause[1][field][-_transfer_charges_-]" disabled="disabled" type="text"> 
    to be filled in.
    <ol type="a">
        <li>This is a sub clause with a <input class="clause_input" name="clause[1][field][-_noc_charges_-]" disabled="disabled" type="text"></li>
        <li>Last sub clause.</li>
    </ol>
</div>
</form>

现在，默认情况下禁用所有文本框字段。在选中相应的复选框字段后，同一div上的所有文本框字段都将处于活动状态，如果取消选中，将执行相反的操作。对不起，我不太清楚从哪里开始。我将使用php来处理提交的数据。任何帮助将不胜感激。

Answer 1

鉴于标记，您可以尝试

$(function(){

  $(":checkbox").on("change",function(e){

   if($(this).is(":checked"))
      $(this).closest("div.box").find(":input").prop("disabled",false);
  else
     $(this).closest("div.box").find(":input:not(:checkbox)").prop("disabled",true);    
 });    
});

DEMO

更新：

如果您动态生成表单，则可以像

一样使用它

$(document).on("change",":checkbox",function(e){
...
// rest of the code remains the same

Answer 2

看一下这个演示：http://jsfiddle.net/tAkGH/ 和脚本：

$('body').on('change', '.clause_check', function() {
    $(this).closest('.box').find(':input:not(".clause_check")').prop('disabled', !$(this).is(':checked'));
})

jQuery和关联表单，需要帮助使用启用和禁用复选框

2 个答案: