jquery removeAttr("checked") - not resetting selectedindex

hi,

i am using jquery on an asp.net 3.5 site.


i have 2 radio button lists

listA and listB

when the 3rd radio button in listA is checked - listB becomes enabled.

when the 3rd radio button in listA is checked - you must select an item in listB. (or you see an serverside - error message)

I am using an asp:customValidator   - which calls a serverside method

the method does the following:

public void ValidateListB(object o, ServerValidateEventArgs e)
{

      if (listA.SelectedIndex == 2)
      {
               
            if (listB.SelectedIndex == -1)
              {
                  e.IsValid = false;
              }
      }
}


Quite straightforward!

This works the first time round, but when i do the following:

1. I selected a radio button in listB, save it down to the database.
2/ Then select the 2nd radio button in listA (so listB becomes disabled/ and the checked attribute is removed)
3. Then reselect the 3rd radio button in listB (so listB becomes enabled again)
4. But i do not select anything in listB - so the customvalidator should see this and raise an error

But it does not raise an error because for some reason:

listB.SelectedIndex == 0  and not -1

so server side - listB still thinks that its 1st radio button is selected - despite the jquery removeAttr("checked")

How can i resolve this problem?

thanks
LVL 1
MrKevorkianAsked:
Who is Participating?
 
Michel PlungjanIT ExpertCommented:
That is the nature of radios. Use a checkbox instead
0
 
MrKevorkianAuthor Commented:
just checked the source - and even after removeAttr("checked")  -

this is still in the page -  checked="checked"
0
 
Michel PlungjanIT ExpertCommented:
how would the codebehind OR the source viewer understand you removed an html attribute with javascript??

The view-source would only show initial state. You need firebug to see what jQuery did

Instead set it to false
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MrKevorkianAuthor Commented:
well presumably - the code behind figures out the selected index from the checked attribute in the html?

anyway, just looked in firebug and it the checked attribute is still there after the removeAttr("checked") is run.
0
 
MrKevorkianAuthor Commented:
my mistake - the checked attribute - IS removed by the removeAttr("checked").

however, when the page is posted back - the listB.SelectedIndex is still = 1.  not -1??


0
 
Michel PlungjanIT ExpertCommented:
So uncheck it.

.attr('checked', false);
0
 
MrKevorkianAuthor Commented:
the removeAttr("checked") - does seem to be removing the checked attribute.


but when i post this back to server side - listB.selectedValue is still = to 1, when it should be = -1 (i.e nothing is selected). thats the problem.
i would have thought listB.SelectedValue - would see that there is no "checked" attribute on any of the radio buttons and show a -1.  
0
 
Michel PlungjanIT ExpertCommented:
maybe undefined is not handled
The correct way is to uncheck it
0
 
MrKevorkianAuthor Commented:
thanks.
i tried the checked, false - but when i post back - on the server side - the radio button still thinks it is selected?
It seems you can truly uncheck a radio button list - once you have checked it. - regardless of what you do with jquery - your last checked button will show up in the "SelectedValue" or "SelectedIndex".

So i have got no way of telling if everything has been unchecked or not.  
0
 
Michel PlungjanIT ExpertCommented:
Sounds very strange. I am afraid I do not do asp so I cannot help you further.
Perhaps delete this and re-ask it with the new information about the unchecking
0
 
ventaurCommented:
Try resorting to the element's native checked property via jQuery's each method.

$('yourRadioSelector').each(function () {
  this.checked = false;
});

Open in new window

0
 
MrKevorkianAuthor Commented:
hi thanks for replying.

i tried this but still the selectedindex  server side is = 0  not = -1 (as it is the first time it is posted back with no radio selection).
I guess its a bug, you cant unselect a radio button list once you have checked one of them.
0
 
ventaurCommented:
It does seem like a bug. That is not really the nature of radio buttons in standard HTML. The button is either checked or not and you can clear them all via JavaScript. This has to be an issue with ASP.NET server-side.
0
 
ventaurCommented:
As a possible alternative, you could try detaching the radio button from the DOM, then reattaching it back.

var radio = $('yourselector');
var target = radio.prev();
radio.detach();
radio.insertAfter(target);

Open in new window

0
 
MrKevorkianAuthor Commented:
thanks i will give it a go
0
 
MrKevorkianAuthor Commented:
hi, my radio buttons are in a radiobutton list - so i am finding it hard to do this:

var radio = $('yourselector');

i tried doing a for each round my inputs -

 $('#mydivinput').each(function() {

          var target = $(this).prev()
                        $(this).detach();
                        $(this).insertAfter(target);
             });      

but  var target = $(this).prev() did not run - this object does not support this method.

do you have any ideas?

thanks
0
 
ventaurCommented:
Your each is actually working on the single mydivinput element with that id. You'll want to get at the radios inside that element to try the detach out. Give this a go (assuming there is a div with id="mydivinput" that your RadioButtonList is within).

$('#mydivinput input:radio').each(function () {
  var $this = $(this);
  var $target = $(this).prev();
  $this.detach();
  $this.insertAfter($target);
});

Open in new window

0
 
MrKevorkianAuthor Commented:
hi,

i tried that new code but im still getting "object doesnt support this property" on the line

   $this.detach();
0
 
ventaurCommented:
We'll give it one last shot:

$('#mydivinput input:radio').each(function () {
  var $radio = $(this);
  var $target = $radio.prev();
  $radio.detach();
  $radio.insertAfter($target);
});

Open in new window

0
 
MrKevorkianAuthor Commented:
Im still getting "this object does not support this method" on $radio.detach();

i give up!


0
 
ventaurCommented:
What version of jQuery are you using currently?
0
 
MrKevorkianAuthor Commented:
1.3.2  
- do more recent versions still work with i.e 7?
0
 
ventaurCommented:
Yes. The latest version still supports back to IE 6. The detach method was added in version 1.4 and that is why you are getting that error.

I'm not even sure detaching the elements from the DOM will work, so it may all be for nothing.
0
 
MrKevorkianAuthor Commented:
thanks everyong for trying - at least i know it isnt going to work now.  it looks like checkboxes would be solution, only the user doesnt want these. so they are going to stay as they are for the time being.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.