JQuery text-field not deactivable in IE

Question

Good morning guys!
I am suffering from a problem with my old favourite Internet Explorer 8 ;-). I have some jQuery code that (de-)activates and colours some report columns based on another column value. While this code is working perfectly in all browsers I have tested, it is not working in IE. The cell itself is coloured correctly but if the column, respectively the cell value, changes that is supposed to trigger the deactivation or colouring, nothing happens in IE. The cell properties do not change and the report is not refreshed. I have tried to insert the code into the region header of my report, into the page header etc. without any obvious changes. The problem simply is that most of my users rely on IE 8 due to corporate software restrictions. Hence Firefox is not supported and I need to get that code running on IE.
Maybe you can have a look at my code and tell me what could be done to enforce the same functionality in IE.
Thanks a lot guys!
Best regards,
Sebastian
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('select[id^="f04_"]').each(function() {
         toggleFields(this);
      $('select[id^="f04_"]').live('change', function() {
         toggleFields(this);
   function toggleFields(selectElmt) {
      $select = $(selectElmt);
      $commPct = $select.parents('tr').eq(0).find('input[id^="f06_"]');
      $commPct2 = $select.parents('tr').eq(0).find('input[id^="f08_"]');
      $commPct3 = $select.parents('tr').eq(0).find('input[id^="f05_"]');
      $commPct4 = $select.parents('tr').eq(0).find('input[id^="f07_"]');
      if ($select.val() == '-1') {
         $commPct
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
  $commPct2
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
$commPct3.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct4.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
      } else {
$commPct.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct2.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct3
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
$commPct4
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
//]]>
</script>

Answer 1

Good morning!
I finally found the solution to this problem after reading more about jQuery and browser issues. The live-change function is simply buggy in IE8.
Getting rid of the "live" declaration solves the problem. See below:
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('select[id^="f04_"]').each(function() {
         toggleFields(this);
      $('select[id^="f04_"]').change(function(){
         toggleFields(this);
   function toggleFields(selectElmt) {
      $select = $(selectElmt);
      $commPct = $select.parents('tr').eq(0).find('input[id^="f06_"]');
      $commPct2 = $select.parents('tr').eq(0).find('input[id^="f08_"]');
      $commPct3 = $select.parents('tr').eq(0).find('input[id^="f05_"]');
      $commPct4 = $select.parents('tr').eq(0).find('input[id^="f07_"]');
      if ($select.val() == '-1') {
         $commPct
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
  $commPct2
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
$commPct3.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct4.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
      } else {
$commPct.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct2.unbind('focus').removeAttr('readonly').css("background", "#99FF00" )
$commPct3
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
$commPct4
            .focus(function() {
               this.blur();
            .attr('readonly','readonly')
            .css("background", "#CCCCCC")
            .val('');
//]]>
</script>I still have one problem that remained unanswered with no reply. Maybe you can have a look at it again!?
Problem disabling select list in updateable report
Regards,
Sebastian