I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success.
Snapshot:
The Objective:
I am working on a sortable list where users are required to rank items from 1 to 6 based on their importance. Once they select "2" for a specific item, we want to prevent them from selecting "2" for another item. Here is the jQuery code that achieves this functionality:
// Disabling sibling radio buttons in form after an item is selected
$("input:radio").click(function() {
var val = $(this).val();
$(this).siblings("input:radio").attr("disabled","disabled");
$("input:radio[value='" + val + "']").not(this).attr("disabled","disabled");
});
The Challenge:
While the code works, it has a few issues.
- The code correctly disables sibling rows, but once a user makes a selection, they cannot change it. For example, if they click "2" on one row and then try to click "3" on the same row, all other "2" and "3" options get disabled completely.
- Users require a method to reset the form entirely using a "start over" or "reset" button, which seems to necessitate some specialized jQuery implementation that eludes me at present.
- I attempted to use code referenced in another post from this url, but it only partially works on my site. In the provided link, clicking "1" also disables "2" and "3" on the same row, a behavior that differs from what I observe during local development. However, if you were to click "2", it permanently disables "2" options in other rows, leaving me puzzled about why it functions differently in the demo compared to my code above.
There must be a simpler solution to this problem that I seem to be overlooking. Any assistance or sample code snippets that can address these issues would be greatly appreciated.