無効にするラジオボタンがグレー表示されないようにする（読み取り専用として動作する）

Question

Microsoft CRMを変更して読み取り専用フィールドを灰色で表示せずに読み取り専用にするという要求があります。 DOMを調べることで、ラジオコントロールが無効に設定されていることがわかりました。この要求を達成するために、アプリケーションがhtmlをどのように生成しているかを変更する能力はありません。しかし、私はフォームのonloadイベントでjavascript関数を実行する能力を持っています。私はいくつかのアプローチを試しました。最近、jQueryを使用して無効な属性を削除し、ユーザがラジオの値を変更しようとするとラジオにイベントハンドラをアタッチしてみました。

このアプローチを使用すると、ユーザーがクリックしたコントロールで変更イベントが発生することがわかりましたが、同じグループ内の別のラジオボタンの選択によって選択解除されたラジオボタンでは発生しません。

arroundを取得するには、ページがロードされたときにチェックされたかどうかを記録するすべてのラジオコントロールにカスタムプロパティを書き込んだ後、カスタム属性を持つすべてのラジオボタンでチェックされたプロパティをリセットするイベントハンドララジオボタンの変更イベントが発生するたびに元の値になります。しかし、この方法は私のために働いていません。私は私のアプローチを示すサンプルアプリケーションを含めるつもりです。私は自分のコードを修正したり、異なるアプローチを使ってこれらのニーズを満たすのを助けてくれてありがとう。

私が思いつくすべての解決策について、要件をもう一度言いたいと思いました。

1. ソリューションはIEにのみ書き込む必要があります。
2. 私は生成されたHTMLを制御することはできず、JavaScriptのみを書き込むことができます。
3. 無効に設定されているフィールドは、グレー表示ではなく黒で表示する必要があります。

4. ユーザーは、これらのフィールドの値を変更できないようにする必要があります。

   <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

@cdeszaqが指摘したように、本当に美しい解決策ではありません。 しかし、最初にチェックしたボタンを「再チェック」するだけです。 Working Fiddle。

Answer 2

あなたのJavascriptを他のHTML要素、同じデータが含まれているような<p>要素をフォームフィールドに取って代わる可能性があります。

これは、フォーム要素を無効にする必要がなくなり、少なくとも私にとっては、はるかに意味があります。ユーザーが値を変更できない場合は、フォーム要素を作成するのはなぜですか？

また、イベントを傍受しようとすることや、通常の動作を妨げるものを処理することは、もっと簡単です。