Question

I have a request from users to modify Microsoft CRM to make it’s read-only fields not greyed out, but still read only. By inspecting the DOM I’ve learned that the radio controls are set as disabled. To accomplish this request I have no ability to change how the application is generating the html. However, I do have the ability to run a javascript function on the forms onload event. I have tried a few different approaches, most recently I tried using jQuery to remove the disabled attribute and attach event handlers to the radio’s to change their values back if a user tries to change them.

Using this approach I learned that the change event fires on the control the user clicks, but does not fire on the radio button that was unselected by the selection of another radio button in the same group.

To get arround this I tried writing a custom property to all the radio controls that record whether it was checked when the page was loaded, and then an event handler that resets the checked property on every radio button with a custom attribute to it’s original value whenever any radio button’s change event fires. This method is not working for me either however. I’m going to include a sample application to show my approach. I would appreciate help fixing my code, or help meeting these needs using a different approach.

I wanted to restate the requirements one more time for any solution I come up with.

1. Solution only needs to be written to IE.
2. I have no control over the generated HTML, only the ability to write javascript.
3. Fields that are set as disabled need to be rendered in black, not greyed out.

4. Users must not be able to change the values of these fields.

   <script src="js/jquery.1.6.4.min.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           //Set custom attribute for disabled checked radio's
           $('input:radio:disabled:checked').attr('custom:bmiChecked', "true");
           //set custom attribute for disabled unchecked radio's
           $('input:radio:disabled:not(:checked)').attr('custom:bmiChecked', "false");
           //select disabled radio's and then filter to radio's that have the custom attribute set
           $('input:radio:disabled').filter(function () {
               return $(this).attr('custom:bmiChecked');
           }).each(function () {
               //attach a click event handler
               $(this).click(function () {
                   //In the event handler select all radio's that have the bmiChecked attribute
                   $('input:radio').filter(function () {
                       return $(this).attr('custom:bmiChecked');
                   }).each(function () {
                       //For each of these radio's set their checked property to the original value from the page load.
                       if ($(this).attr('custom:bmiChecked') == "true") {
                           $(this).attr('checked', "").css({ 'border': '5px solid green' });
                       }
                       else {
                           $(this).attr('checked', "checked").css({ 'border': '5px solid red' });
                       }
                   });
               });
           });
           //remove all the disabled properties from radiobutton's
           $('input:radio:disabled').prop('disabled', false);
       });
   </script>
   
   
   <input name="rad_new_bitfield2options" tabindex="1090" class="ms-crm-RadioButton" disabled="" id="Radio2" style="margin-left: 0px;" type="radio" value="1" checked="checked" />
   
   <input name="rad_new_bitfield2options" tabindex="1090" class="ms-crm-RadioButton" disabled="" id="Radio3" type="radio" value="2"  />
   

Answer 1

Not a really beautiful solution as @cdeszaq pointed out.
But all you need to do is “recheck” the originally checked button.
Working Fiddle.