включить кнопку отправки с помощью Jquery, если щелкнул любой элемент формы

Question

Я использую шаблон django и jquery для создания формы.Я хочу, чтобы кнопка отправки была отключена, если пользователь не щелкнет по любому из элементов формы.Я попробовал простую однострочную версию, которая, как я думал, будет работать, но это не так.Я также пытался подключить обработчик к классу "q1_input", и я пробовал .focus и .click, но кнопка не активируется.

Вот фрагмент кода:

<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:

другая интересная вещь заключается в том, что если я нажимаю, для атрибута disabled устанавливается значение "", но, похоже, существуют некоторые пользовательские настройки jquery css, которые не распознают изменение.Firebug показывает:

Я предполагаю «отключение арии» (что бы это ни было, честно говоря, я не знаю), и класс css препятствует повторному включению.Не уверен, почему они не обновляются с удалением атрибута, хотя ... или как это исправить (по крайней мере, легко)

Answer 1

См. Этот jsfiddle, который я создал: http://jsfiddle.net/6DXSa/

Функциональность отлично работает, и это в основном код, который у вас уже есть. Должно быть что-то еще, не включенное здесь, которое противоречит.

ОБНОВЛЕНИЕ Этот jsfiddle фактически использует ваш HTML-источник и все еще работает нормально: http://jsfiddle.net/6DXSa/1/

Answer 2

Начиная с jQuery 1.6, вы не можете использовать .removeAttr() для успешного изменения определенных атрибутов.Это немного сбивает с толку, но в основном jQuery разделяет фактические атрибуты html (имя, идентификатор и т. Д.) И свойства объекта js, которые могут быть представлены в виде атрибутов (проверено, отключено).Используйте .removeProp() вместо .removeAttr().

Подробнее см. В документах jQuery по .removeProp().