How to enable/disable multiple submit buttons on a

2019-07-22 09:25发布

问题:

I have a form that lists all the milestones in a project. The form has two submit buttons. One displays the tasks in the milestone. The other submit button is supposed to execute a script to generate a burndown chart for the selected button. Here is what I want to do

  1. When the page loads and no milestone is selected, both the submit buttons are disabled — This is achieved.
  2. When the user selects any milestone, both the submit buttons get activated - I need help with this. I know how to link enable/disable of one submit button with a radio selection. It is the two submit buttons I have issues with.
  3. Depending on which button is pressed, appropriate Python script should execute in the background. — I will work on this once my disable buttons issue is done.

At present, when the page loads, both the submit buttons are in disabled state. And even after I select a milestone, none of them gets enabled. I suspect, it may be because it may be returning an array of submit buttons and may be I need to have logic for the same? Any help is appreciated. Here is the code.

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

Here's a fiddle that does what you say you need:

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

And here's the jQuery and HTML you'd need:

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