Question

我有以下jQuery代码，当值为空时禁用表单中的提交按钮。该代码适用于除.action_manager（在表中动态生成的textarea）之外的所有条目，其中通过仅填充第一行，按钮被启用。我希望在重新激活submitbutton之前填写所有字段。 action_manager只有一个实例足以启用该按钮（不我想要的内容）

 $('document').ready(function(){

        var submitButton = $('input[name="store_values"]');
        checkValues();

        $('select.actuallevel').on('change',function(){
            checkValues();
        });
        $('select.targetlevel').on('change',function(){
                checkValues();
            });
        $('select.quarter_manager').on('change',function(){
            checkValues();
        });
        $('select.year_manager').on('change',function(){
            checkValues();
        });

        $(".action_manager").each(function()
        {
           $(this).on('change',function(){
                checkValues();
          });
        });


        function checkValues(){
            submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 ||
                $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 ||
                $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 ||
                $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 ||
                !$.trim($(".action_manager").val())


            );
            //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0);
        }
    });

textarea字段如下：

echo "<td><textarea class='action_manager' id='action-".$inf['Competence_ID']."' name='acto-".$inf['Competence_ID']."'>";if (isset($inf['actiontext'])){echo $inf['actiontext'];}echo "</textarea></td>";
    echo"<td>";

Answer 1

假设您已动态插入.action_manager textareas，则在加载文档时它们不存在。因此，您对.action_manager textareas的附加事件将不会对新textareas有效。

这是将事件附加到新旧.action_manager textareas的正确方法：

   $(document).on('change','.action_manager',function(){
        checkValues();
  });

编辑回答：

使用以下功能

        function checkValues(){
            var action_managerfilled = true;
            $(".action_manager").each(function(){
               if (!$.trim($(this).val())){
                    action_managerfilled = false;
                    return false;
               } 
            });
            submitButton.prop('disabled',$(".actuallevel > option:selected[value=''],.actuallevel:empty").length > 0 ||
                $(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0 ||
                $(".quarter_manager > option:selected[value=''],.quarter_manager:empty").length > 0 ||
                $(".year_manager > option:selected[value=''],.year_manager:empty").length > 0 ||
                !action_managerfilled
            );
            //submitButton.prop('disabled',$(".targetlevel > option:selected[value=''],.targetlevel:empty").length > 0);
        }

似乎$（'。action_manager'）。val（）仅在所有情况下返回第一个textarea的值，而不是检查类'.action_manager'的每个textarea的值;因此上面的.each（）函数可以解决问题。

Answer 2

你需要使用on委托事件来动态生成元素 ..和你不需要在这里使用$.each循环，选择器选择全部从该类开始的元素 ...

$(document).on('change','.action_manager',function(){
     checkValues();
});

但是，建议使用文档中存在的最接近的静态父级而不是document本身

jQuery函数不适用于同一个类的所有字段

2 个答案: