【问题标题】:How to enable/disable multiple submit buttons on a form depending on selection of a radio button如何根据单选按钮的选择启用/禁用表单上的多个提交按钮
【发布时间】:2012-03-31 09:59:09
【问题描述】:

我有一个表格,列出了项目中的所有里程碑。 该表单有两个提交按钮。一个显示里程碑中的任务。另一个提交按钮应该执行脚本以生成所选按钮的燃尽图。 这是我想做的事

  1. 当页面加载并且没有选择里程碑时,提交 按钮被禁用 - 这是实现的。
  2. 当用户选择任何里程碑时,两个提交按钮都会获得 已激活 - 我需要这方面的帮助。我知道如何链接启用/禁用 一个带有单选选项的提交按钮。这是两个提交 我遇到问题的按钮。
  3. 根据按下的按钮,相应的 Python 脚本 应该在后台执行。 ——我会在这方面工作 禁用按钮问题已解决。

目前,页面加载时,两个提交按钮都处于禁用状态。即使在我选择了一个里程碑之后,它们都没有启用。我怀疑,这可能是因为它可能会返回一组提交按钮,并且可能我需要有相同的逻辑?任何帮助表示赞赏。这是代码。

<form action="show_milestone.py" method="POST" name="milestone_form">
<table><tbody><tr>
    <td>Milestone ID</td>
    <td>Milestone Name</td>
    <td>Milestone Start Date</td>
    <td>Milestone End Date</td>
</tr>
<tr>
    <td><input type="radio" name="milestone_id" value="1" onclick="javascript:document.milestone_form.submit.disabled=false"> 1<br></td>
    <td>milestone_1</td>
    <td>03/24/2012</td>
    <td>04/07/2012</td>
</tr></tbody></table>
<p></p>
<input type="submit" name="submit" value="Show Tasks" disabled="">
<input type="submit" name="submit" value="Get Burndown Chart" disabled="">
</form>

【问题讨论】:

  • 您的代码格式有点错误。你见过 knockout.js 吗?这是一个很棒的库,如果你只是为了这个而使用它会有点矫枉过正,但它会让这个问题变得微不足道。

标签: javascript python html cgi


【解决方案1】:

这里有一个小提琴,可以满足你的需求:

http://jsfiddle.net/bDwxB/1/

这是您需要的 jQuery 和 HTML:

<script>
$(document).ready(function(){
    $('input[name=buttonGroup]').change(function(){
        $('input.buttonGroupDependent').attr('disabled', true);
        $('#' + $(this).data().trigger).attr('disabled', false);
    });
});​
</script>

<input type="radio" name="buttonGroup" data-trigger="button1" />
<input type="radio" name="buttonGroup" data-trigger="button2" />
<input type="radio" name="buttonGroup" data-trigger="button3" />

<form action="/echo/json/1">
    <input type="submit" id="button1" value="Button 1" class="buttonGroupDependent" disabled/>
</form>
<form action="/echo/json/2">
    <input type="submit" id="button2" value="Button 2" class="buttonGroupDependent" disabled/>
</form>
<form action="/echo/json/3">
    <input type="submit" id="button3" value="Button 3" class="buttonGroupDependent" disabled/>
</form>​

【讨论】:

  • 感谢 Milimetric,我的问题略有不同。我只有一个单选按钮来选择里程碑。当用户单击单选按钮时,应启用两个提交按钮。现在在稍后阶段,根据用户单击的提交按钮,将运行相应的脚本。
  • 这似乎比我上面设置的更简单。你应该去小提琴链接并玩它,直到你得到你需要的东西。我并不打算解决您的确切问题,只是向您展示如何使用 jQuery、类、名称、数据属性和 id 与 html 元素进行交互。研究代码,您会发现解决问题所需的一切都在那里。
猜你喜欢
  • 2017-06-30
  • 1970-01-01
  • 1970-01-01
  • 2016-05-31
  • 1970-01-01
  • 1970-01-01
  • 2010-09-23
  • 2010-11-22
  • 2018-07-15
相关资源
最近更新 更多