IEで無効なものを選択したときにラジオボタンをチェックしたままにする方法は？

Question

私はIE（9,10,11）に次の問題があります。ラジオボタンのグループがあり、そのうちのいくつかは無効にする必要がありますが、依然としてフォームとともに送信されます。だから私は、次の機能を使用してこれを行う方法を考え出し：

var doNothing = function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
} 
var disableRadio = function($elem){ 
    $elem.bind('click.radiostate', doNothing); 
    $elem.addClass('disabledRadioClass'); 
} 

の代わりdisabled属性を追加し、CSSで対応するボタンをスタイリング：opacity:.5;無効のように表示させるために。問題は、IEで「無効」ラジオボタンを選択すると、選択したラジオボタンがまだチェックされていないことです。ただし、まだchecked属性がチェックされています。ここで私が何を意味するかです：

'無効' ラジオ（ラジオ2）をクリックする前に：

以降：

一切選択されたラジオ。フォームを送信してページを更新すると、ラジオ3が再び選択されます。

私が望むもの：「カスタムメイド」の無効化ボタンをクリックすると、選択されたボタン（この場合はラジオ3など）はそのまま（Chromeの場合）そのままにする必要があります。ラジオボタンはチェックされたままです。

Answer 1

にイベントリスナーを追加します。

var disableRadio = function($elem){ 
    /** 
    * We need this in case of clicking on a disabled radio button: must know 
    * the previously checked radio button, so the selection stays as is and 
    * does not disappear or move to the disabled one. 
    * @type element 
    */ 
    var $previouslySelectedRadioButton = $("input[name='"+$elem.attr("name")+"']:checked"); 
    /* Mouseup is executed before click, so by doing this we can get the 
    * previously checked radio before the disabled one gets the 
    * checked PROPERTY set to true. */ 
    $elem.bind('mouseup.radiostate', function(event){ 
     $previouslySelectedRadioButton = $("input[name='"+$(event.target).attr("name")+"']:checked"); 
    }); 
    //on click we return checked property to the previously selected radio 
    $elem.bind('click.radiostate', function(){ 
     $previouslySelectedRadioButton.prop("checked", true); 
     return false; 
    }); 
    $elem.addClass('disabledRadioClass'); 
}; 

@Miguelカブレラは私のアイデアを与えました。

Answer 2

無効な属性をラジオボタンに追加する代わりに、ラジオボタンを非表示にしてダミーの無効なラジオボタンをその場に追加し、再度有効にする場合は無効にします。

Answer 3

は、私が代わりにこれを使用したRadioButton

var currentRadio = 'r2' 
 
var els = document.getElementsByClassName('radio') 
 
var len = els.length; 
 

 
while(len--){ 
 
    els[len].addEventListener('click',function(ev){ 
 
    if(ev.currentTarget.id == 'r1'){ 
 
     document.getElementById(currentRadio).checked = true; 
 
    } else { 
 
     currentRadio = ev.currentTarget.id 
 
    } 
 
    
 
    }) 
 
} 
 
document 
 
.querySelector('#r1') 
 
.style.opacity = .5

<form> 
 
<input class="radio" id="r1" name="name" value="radio1" type="radio"> 
 
<input class="radio" id="r2" name="name" value="radio2" type="radio"> 
 
<input class="radio" id="r3" name="name" value="radio3" type="radio"> 
 
</form>