Question

希望你们都做得很好！

所以我一直试图让这件事情发挥作用。演示可以在这里找到： http://jsfiddle.net/8Q9ut/

基本上，我有一个表单，由多行checkbox-textbox-textbox-textbox-textbox组成。每次用户单击X行上的复选框时，以下文本框都将是可编辑的（请参阅小提琴）。

现在，客户端突然希望我创建一个“全选”复选框，以便选中所有复选框。我可以使它工作，但我还需要相应的文本框可编辑。我怎么能让这个工作？我认为

下的代码

   $('form').on('change', 'input[type=checkbox]', function (e) {

已经可以让文本框根据复选框事件做出响应，没有？

感谢您的投入！

编辑：谢谢大家！你的解决方案一切都适合我，但我选择了Ehsan Sajjad的答案只是因为我只需要在我的剧本中添加该行，它就像魅力一样。再次感谢您的努力！

我已经更新了小提琴以防万一有人需要 updated fiddle

Answer 1

将SelectAll的当前状态复选框设置为3复选框的其余部分，即如果selectall将检查其他人将被检查，反之亦然，最后触发复选框的更改事件

DEMO

$('#all').on('click', function () {

    if($(this).is(":checked"))
        $(".clone_me").find("input[type=checkbox]").prop("checked", true);
    else
        $(".clone_me").find("input[type=checkbox]").prop("checked", false);

    $(".clone_me").find("input[type=checkbox]").trigger("change");
});

Answer 2

Demo Fiddle

检查一下，

$('#all').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked).closest('.me').find('input[type=text]').prop('disabled', !$(this).is(':checked'));
});

或者更好地使用单个更改功能。

<强> Single function Demo

$('form').on('change', 'input[type=checkbox]', function (e) {
        console.log('on change');
        var checkbox = $(this);

        //If the selected box is #all

        if(this.id == 'all'){
           $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked).closest('.me').find('input[type=text]').prop('disabled', !$(this).is(':checked'));
         }

        checkbox.closest('.me').find('input[type=text]').prop('disabled', !checkbox.is(':checked'));
  });

Answer 3

您需要更改所有复选框更改事件并执行以下操作：

$('#all').on('click', function () {
        $(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
        $(this).closest('fieldset').find('input:text').prop('disabled',!this.checked);

    });

它会找到所有文本框，并会根据选中或未选中的复选框启用和禁用它们。

FIDDLE：

http://jsfiddle.net/ehsansajjad465/58BFJ/1/

Answer 4

我创造了这个：

<强> HTML

<table>
  <tr>
      <td><input type="checkbox" id="checkAll">Select All</input></td>
   </tr>
    <tr>
      <td><input type="checkbox" /></td>
   </tr>
    <tr>
      <td><input type="checkbox" /></td>
   </tr>
    <tr>
      <td><input type="checkbox" /></td>
   </tr>
    <tr>
      <td><input type="checkbox" /></td>
   </tr>
    <tr>
      <td><input type="checkbox" /></td>
   </tr>

</table>

<强> JS

$("#checkAll").on("click", function(){
    $(this).prop("checked") ? $("table").find("input:checkbox").prop("checked", true) : $("table").find("input:checkbox").prop("checked", false);       
});

fiddle

Answer 5

我尝试了以下内容并且有效。试试吧。

 $(document).ready(function () {
            $('form').on('change', 'input[type=checkbox]', function (e) {
                console.log('on change');
                var checkbox = $(this);
                /*
                 * If any checkbox is checked, find the nearest input text and enabled user to key in value
                 */
                checkbox.closest('.me').find('input[type=text]').prop('disabled', !checkbox.is(':checked'));
            });

            $('#all').on('click', function () {
                var allCheckbox = $(this).is(':checked');
                $.each($('body .me input[type=checkbox]'),function(index,item){
                    $(item).prop('checked', allCheckbox);
                    $(item).closest('.me').find('input[type=text]').prop('disabled', !allCheckbox);
                })
            });

        });

更改JQuery复选框

5 个答案:

Demo Fiddle

FIDDLE：