我正在使用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:
另一个有趣的事情是,如果我单击,禁用的属性设置为“”,但似乎有一些自定义的jquery css设置无法识别更改。萤火虫表明:
我假设“aria-disabled”(不管是什么,老实说,我不知道)和css类正在阻止重新启用。不知道为什么那些没有获得属性删除的更新,但是...或者如何解决(至少很容易)
答案 0 :(得分:1)
看到我创建的这个jsfiddle:http://jsfiddle.net/6DXSa/
功能完美,它基本上就是你已有的代码。这里必须包含其他不存在冲突的内容。
更新这个jsfiddle实际上使用了您的HTML源代码,但仍能正常运行:http://jsfiddle.net/6DXSa/1/
答案 1 :(得分:0)
从jQuery 1.6开始,您无法使用.removeAttr()
成功更改某些属性。它有点令人困惑,但基本上jQuery分离出实际的html属性(name,id等)和js对象属性,可以表示为属性(已检查,已禁用)。使用.removeProp()
代替.removeAttr()
。
有关详细信息,请参阅jQuery docs on .removeProp()
。