Question

I have two checkboxes in my code as mentioned below:

<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="1">
<input type="checkbox" id="event_id" name="data[Noncompetitor][event_id][]" value="2">

Now I am doing Ajax function like onCreate and onComplete, where I want to disable checkboxes when its initiated and want to enable again as completed request. I am not sure how that can be achieved in Prototype JS and both above checkboxes have same id.

onCreate: function(){

            document.getElementById("event_id").setAttribute("disabled", "disabled");               
            Element.show('loading_message');
        }, 

onComplete: function(){

            document.getElementById("event_id").removeAttribute("disabled");                                
            Element.hide('loading_message');
        },

My Above code works, but it disables only first checkbox, so please help me here.

Thanks !

Answer 1

You can’t have two ids of the same in a HTML page, nothing is stopping you from putting two ids of the same in a HTML page you can but you kill a kitten everytime you do that, and furthermore having two ids will confuse yourself in cases like this. document.getElementById would return the first id it finds and stop caring about the other everytime you have two ids of the same in a HTML page, thus why it only works for one checkbox.

You can either assign classes to your checkboxes, or you can reference your checkbox using name attribute if your form is also named.

http://jsfiddle.net/Q5qNg/7/