如何根据选择的单选按钮启用/禁用表单上的多个提交按钮

时间:2012-03-31 09:59:09

标签: javascript python html cgi

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

  1. 当页面加载且未选择里程碑时,两者都提交 按钮被禁用 - 这是实现的。
  2. 当用户选择任何里程碑时,两个提交按钮都会获得 激活 - 我需要帮助。我知道如何链接启用/禁用 带有无线电选择的一个提交按钮。这是两个提交 按钮我遇到了问题。
  3. 根据按下的按钮,使用适当的Python脚本 应该在后台执行。 - 一旦我的话,我会继续努力 禁用按钮问题已完成。
  4. 目前,当页面加载时,两个提交按钮都处于禁用状态。即使我选择里程碑后,也没有一个被启用。我怀疑,这可能是因为它可能正在返回一组提交按钮,可能我需要有相同的逻辑?任何帮助表示赞赏。这是代码。

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

1 个答案:

答案 0 :(得分: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>​