如果单击任何表单元素，则使用 Jquery 启用提交按钮

Posted 2023-02-24

【中文标题】如果单击任何表单元素，则使用 Jquery 启用提交按钮

【英文标题】：enable submit button using Jquery if any form element is clicked

【发布时间】：2011-12-02 14:26:28

【问题描述】：

我正在使用 django 模板和 jquery 创建表单。我希望禁用提交按钮，除非用户单击任何表单元素。我尝试了一个简单的单线，我认为它可以工作，但它没有。我还尝试将处理程序附加到类“q1_input”，并且尝试了 .focus 和 .click，但没有启用该按钮。

这里是sn-p的代码：

<script type="text/javascript">

    $(document).ready(function() 
        $( "#autofillbox1" ).autocomplete( "source":  choices1|safe );
        $( "#autofillbox2" ).autocomplete( "source":  choices2|safe );
        $("#brainytop").append($("#heading"));
        $('#q1_form').children().change(function()$("#q1_submit").removeAttr('disabled'););
    );

</script>
<div id="content">
    % if show_q1 %<div class="left">
        <p class="title"><strong> q1.title </strong></p>
        <form id="q1_form" action=" next " method="POST">
        % csrf_token %
        % if q1.answer_type == "longtext" %
            <textarea class="q1_input" name="r ref1 " rows="6" cols="36"></textarea>
        % else %% if q1.answer_type == "slider" %
            <div id="slider1" style="padding-top:1.5em;padding-right: 1em;padding-left:.5em;overflow: visible;">
            % for r in q1.responseoption_set.all %
                <div style="text-align:center; margin-bottom:40px;padding-left:10px;">
                <label> r.text </label>
                <select class="q1_input" name="r r.id " id="slider r.id ">
            % for v in range1 %
                <option value= v > v </option>
            % endfor %
            </select><script>$('#slider r.id ').selectToUISlider(tooltip: false, labels:  labels1 ).hide();
                </script></div>% endfor %</div>
        % else %% if q1.answer_type == "autofill" %
            <input name="response" class="q1_input" id="autofillbox1" placeholder="Just start typing..."/>
        % else %% if q1.answer_type == "radio" %
            % for r in q1.responseoption_set.all %
                <span class="r"><input class="q1_input" type="radio" name="r" id="q1_r r.id " value=" r.id "/>
                <label for="q1_r r.id "> r.text </label></span><br>
            % endfor %
        % else %
            % for r in q1.responseoption_set.all %
                <span class="r"><input class="q1_input" type=" q1.answer_type " name="r r.id " id="r r.id " value=" r.id "/>
                <label % if q1.answer_type == "text" %class="textanswer"% endif %for="r r.id "> r.text </label></span><br>
            % endfor %
        % endif %% endif %% endif %% endif %
        <input type="hidden" id="qid" name="qid" value=" q1.pk ">
        <input id="q1_submit" class = "submit" type="submit" disabled="disabled" value="Submit"/>
    </form>

我做错了什么？

编辑：根据要求，呈现的代码如下所示：

<script type="text/javascript">

    $(document).ready(function() 
        $( "#autofillbox1" ).autocomplete( "source": []);
        $( "#autofillbox2" ).autocomplete( "source": []);
        $("#brainytop").append($("#heading"));
        $('#q1_form').children().change(function()$("#q1_submit").removeAttr('disabled'););
    );

</script>


<div id="content">
    <div class="left">
        <p class="title"><strong>Do you feel comfortable walking alone on campus at night?</strong></p>
        <form id="q1_form" action="/canvas/chart/" method="POST">

        <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='a1a2fe72c2660b05341051a85351626f' /></div>


                <span class="r"><input class="q1_input" type="radio" name="r" id="q1_r295" value="295"/>
                <label for="q1_r295">Yes</label></span><br>

                <span class="r"><input class="q1_input" type="radio" name="r" id="q1_r296" value="296"/>
                <label for="q1_r296">No</label></span><br>


        <input type="hidden" id="qid" name="qid" value="126">
        <input id="q1_submit" class = "submit" type="submit" disabled="disabled" value="Submit"/>
    </form>

EDIT2：

另一个有趣的事情是，如果我单击，禁用属性设置为“”，但似乎有一些自定义 jquery css 设置无法识别更改。 Firebug 显示：

我假设“aria-disabled”（无论如何，老实说，我不知道）和 css 类是阻止重新启用的原因。不知道为什么那些没有随着属性删除而更新，但是......或者如何解决这个问题（至少很容易）

【问题讨论】：

你能显示渲染的代码（即将传递给浏览器的 ode）吗？这看起来完全是前端的问题，所以专注于前端代码通常是个好主意。

您的代码在这里工作：jsfiddle.net/nrabinowitz/rCWx8/2 - 所以还有其他问题。也许您的.ready() 函数中的前三行之一正在引发错误？

它似乎一直在通过 document.ready，但没有正确附加处理程序。我在 ready 函数中放置了警报，所有这些都显示了，但是我在 .change 处理程序中放置的另一个警报没有显示......我不知道为什么。我还将它改回使用类作为选择器，这也不起作用。

编辑，抱歉，警报确实出现了。所以它看到了焦点，但只是不删除属性......？

【参考方案1】：

查看我创建的这个 jsfiddle：http://jsfiddle.net/6DXSa/

功能完美运行，基本上就是您已经拥有的代码。一定有其他未包含在此处的内容存在冲突。

更新这个 jsfiddle 实际上使用了你的 html 源并且仍然可以正常工作：http://jsfiddle.net/6DXSa/1/

【讨论】：

jsfiddle 之所以有效，是因为标记不同于 OP（输入是表单的直接子级）。

【参考方案2】：

从 jQuery 1.6 开始，您无法使用 .removeAttr() 成功更改某些属性。它有点令人困惑，但基本上 jQuery 将实际的 html 属性（名称、id 等）和可以表示为属性（选中、禁用）的 js 对象属性分开。使用.removeProp() 而不是.removeAttr()。

请参阅jQuery docs on .removeProp() 了解更多信息。

【讨论】：

嗯...他没有使用attr。他使用了removeAttr。完全不同。

同样适用。他应该使用removeProp。 api.jquery.com/removeProp

jQuery 在社区痛哭和咬牙切齿之后放弃了道具问题。 attr 和 removeAttr 都可以像往常一样使用。

@Chris Pratt - 好吧。谢谢你告诉我。