jQuery-如果選中1個復選框，則一次啟用4個文本框

Question

我在發布之前已經進行了搜索，但是如果在其中選中一個復選框，我只會發現顯示一個文本框的問題和解決方案： jQuery-選中復選框時顯示文本框

但是我的形式不一樣

<form method="post" action="actionhere">
<div id='clone_me'>
    <?php 
    for($i=1; $i<=5;$i++) {
        ?>
      <div>
        <span id="title">Line <?php echo $i;?></span>

        <input type='checkbox' name='ck_<?php echo $i;?>'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
        <input type='text' class='tx<?php echo $i;?>' name='tx[<?php echo $i;?>][]'/>
     </div>
    <?php } ?>
</div>
<input type='submit' name='submit' value='Submit'/>
<input type="button" value="Add row" class="addrow" />
</form>

<script>
$(document).ready(function() {
    $('.addrow').click(function(){                
       var n= $("#clone_me>div").length;
       var new_n=n+1;              
       var new_line= $('#clone_me div:first').clone().append();                
       $("span#title", new_line).text("Line "+new_n+" ");
      //since I clone the 1st <div> therefore the cloned id must be 'ck_1', so changed it to latest id      
   $("input#ck_1", new_line).attr("name", "ck_"+new_n);
   $("input#ck_1", new_line).attr("id", "ck_"+new_n);           
   $("input.tx1", new_line).attr("name", "tx["+new_n+"][]");
       $("input.tx1", new_line).attr("class", "tx"+new_n);
       new_line.appendTo('#clone_me');

    });
});
</script>

從代碼中可以看到，我有一個默認情況下具有5套1-checkbox-4-textbox的表單，並且允許用戶通過單擊“添加行”按鈕添加新的集合（jquery將進行克隆） 。

選中相應復選框后，如何啟用4文本框？ 我沒有使用hide（）或show（）。 我希望用戶知道該文本框在那里，但是在用戶選中該復選框之前被禁用。

if ($("#ck_4").is(":checked")) {
            $("input#tx4).attr("readonly", false); //or enabled

我以為會是這樣，但是由於用戶可以根據需要動態添加多少行，我該如何實現呢？

http://jsfiddle.net/aLw3T/2/

Answer 1

首先給您的復選框一個這樣的數據屬性

<input type='checkbox' data-id="<?php echo $i;?>" name='ck_<?php echo $i;?>'/>

在此之后，創建以下javascript代碼來處理您的輸入/文本字段

$(document).ready(function () {
    $('input[type="checkbox"]').click(function () {
        var self = $(this);
        var checkboxId = self.data('id');
        var checkboxChecked = self.is(":checked");

        /* jQuery < 1.9 */
        if (checkboxChecked) {
            $('.tx' + checkboxId).attr('disabled', 'disabled');
        } else {
            $('.tx' + checkboxId).removeAttr('disabled');
        }

        /* jQuery 1.9+ */
        $('.tx' + checkboxId).prop('disabled', checkboxChecked);
    });
});

Answer 2

只要輸入字段是復選框的兄弟姐妹，您就可以使用以下jquery代碼：

$(document).ready(function() {
  $('form').on('click', 'input[type=checkbox]', function(e) {
    var checkbox = $(this);
    checkbox.closest('.row').find('input[type=text]').prop('disabled',!checkbox.is(':checked')); 
  });
});

如果您有多種形式，請更改用於綁定click事件的選擇器。

例如$('form.my_form').on...

參見示例： http : //codepen.io/lchngr/pen/zhasg/