How to disable and enable a radio button at the same time

Question

I have a few radio buttons which are displayed from mysql database. What I'm trying to achieve is when I click the submit button after selecting a radio button, it is disabled and when I click another radio button, the previously disabled one will be enabled and the currently selected radio button will be disabled. My code for displaying the buttons:

    <form action="">
                        <?php
                        foreach ($sql->results() as $sql) {?>    
 <input type="radio" name="session_id" id="cur" value="<?php echo $sql->id; ?>">  <?php echo $sql->title;?><?php
}?>
<input type="submit" value="submit" onclick="set_type('a')">

                        </form>
                        <?php
                        }

                        ?>

I have tried to enable and disable some radio buttons on jsfiddle but it only works with different ids whereas my radio buttons have only one id.

EDIT : It has been made clear, ids must be unique. I have changed that.

Answer 1

I have two suggestions.

1. you can't have same id for multiple elements in html. please change it
2. you can use css to achieve same above funtion

Answer 2

I'm a little confused by exactly what you are trying to do, but I'll give a solution for each interpretation. :)

You should be able to use this code to get the effect that you want, without needing to use any id or name attributes:

Approach #1: If you are wanting the buttons to be disabled when its associated radio button is selected, then use this code:

$(":radio").on("change", function() {
    $(":submit:disabled").prop("disabled", false);
    $(this).next(":submit").prop("disabled", true);
});

Approach #2: If the buttons are supposed to only disabled after they have been clicked, then use this code:

$(":radio").on("change", function() {
    $(":submit:disabled").prop("disabled", false);
});

. . . and let the click functionality that is (presumably) tied to the button, handle disabling it.

Explanation: Basically, any time you click a radio button, you want to turn of the disabled property of any currently disabled buttons . . . the easiest way to do that is to select all of the disabled buttons and change the disabled property. Once that is done, you can re-apply the disabled status to the one associated with the radio button (or, do that, when the button is clicked . . . whichever one matches what you are trying to accomplish :) ).

Note: this is also assuming that you don't have any other radio buttons and submit buttons on the page . . . if you do, you will need to "scope" the jQuery selectors. The easiest way to do this would be to give your <form> element and id (I'll use "FORM_ID" for this example) and then update the code to this:

$("#FORM_ID").find(":radio").on("change", function() {
    $("#FORM_ID").find(":submit:disabled").prop("disabled", false);
    $(this).next(":submit").prop("disabled", true);
});

---

EDIT:

Based on your clarification, this code should accomplish what you are looking for:

$(":submit").on("click", function() {
    $(":submit:disabled").prop("disabled", false);
    $(this).prop("disabled", true);
});