Changing the rating's readonly from true to false with javascript glitches my rating.

Here's a link to the original issue I posted a minute ago on gCode: https://code.google.com/p/jquery-star-rating-plugin/issues/detail?id=140&thanks=140&ts=1388264957

I am sorry, but I didn't figure out how to link your JS to jsfidle. Please read through my issue, I really need this. BTW: I have uploaded the .js, but then it still didn't work, because it couldn't find the images..

What steps will reproduce the problem? HTML:

<input class="star" type="radio" name="rating" value="1" title="Worst"  disabled="disabled" />
<input class="star" type="radio" name="rating" value="2" title="Bad"    disabled="disabled" />
<input class="star" type="radio" name="rating" value="3" title="OK"       disabled="disabled" />
<input class="star" type="radio" name="rating" value="4" title="Good"   disabled="disabled"  checked="checked" />
<input class="star" type="radio" name="rating" value="5" title="Best"   disabled="disabled" />

<div id="edit">
    EDIT
</div>

<script>
  $( document ).ready(function() {
    $( "#edit" ).click(function() {
        $('input').rating('readOnly',false);
    });
  });
</script>

I have also tried to get rid of the script and change the DIV to this:

<div id="edit" onclick="javascript:$('input[type=radio]',this.form).rating('readOnly',false)" value="Set readOnly = false" class="">
    EDIT
</div>

But this also didn't work. It also only displays the "cancel" button, but I can't select any of the stars.

INSPECT ELEMENT classes on the <div role="text"> as I have 5 radio boxes, where the 4th one has selected attribute. Original

1-4 star-rating rater-0 star star-rating-applied star-rating-readonly star-rating-on
5 star-rating rater-0 star star-rating-applied star-rating-readonly

After clicking the DIV

1-4 star-rating rater-0 star star-rating-applied star-rating-on
5 star-rating rater-0 star star-rating-applied

What is the expected output? What do you see instead?

I was expecting that clicking the edit div would make the rating active again so I could change the value. But, it somehow glitches. When I click the #edit div the "cancel rating" button is displayed, but I am unable to click on any of the stars. The first screen shot is what I see right after clicking the DIV. The second is a screenshot of how it looks like when I place my mouse over the second star. For some reason Mac doesn't put the mouse to the screenshot, but it is right over the star.. Please, do you have any ideas or tips on what could be causing this issue? Right now the only solution for me is to reload the page and load new rating when the user clicks the edit button, but I really don't want to do that.

What version of the plugin/jQuery are you using?

PLUGIN VERSION: v4.11 JQUERY VERSION: 2.0.3 BROWSER(S) VERSION(S): Chrome 31.0.1650.63

Feel free to provide any additional information below.

I hope this makes some sense. I really don't understand what could be causing the problem here. Since I am doing something so simple. If you would require any ideational information feel free to ask for it. I am looking forward to your reply. Sincerely James B.

fyneworks / star-rating

Changing the rating's readonly from true to false with javascript glitches my rating. #7