Jqueryのラジオ・リスト・コントロールのラジオ・ボタンを無効にする

Question

条件に基づいて、ラジオ・ボタン・コントロールからラジオ・ボタンを無効にする必要があります。 問題は、ラジオボタンリストはCMSによって自動的に生成され、idはすべてのリスト項目で同じです。 どのように私は条件に基づいて "無効"クラスを適用することができます。 if（some value == am）などの最初のラジオボタンを表示し、他の2つを無効にします。

<div class="fieldset">  
<div class="radio"> 
      <label > 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)"> 
       <span class="disable">Morning (8 AM - 1 PM)</span> 
      </label> 
     </div> 
     <div class="radio"> 
      <label> 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false"> 
       <span> Afternoon (1 PM - 5 PM)</span> 
      </label> 
     </div> 
     <div class="radio"> 
      <label> 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)"> 
       <span> Evening (5 PM - 9 PM)</span> 
      </label> 
     </div> 
</div> 
</div> 

Answer 1

ないような良いアイデアが、あなたは（propメソッドを使用して）value属性の値でラジオを選択し、関連するラジオを無効にするためにjqueryのを使用することができます。

$('input[type="radio"][value=" Afternoon (1 PM - 5 PM)"]').prop('disabled', true); 
 
$('input[type="radio"][value=" Evening (5 PM - 9 PM)"]').prop('disabled', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="fieldset">  
 
    <div class="radio"> 
 
    <label > 
 
     <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)"> 
 
     <span class="disable">Morning (8 AM - 1 PM)</span> 
 
    </label> 
 
    </div> 
 
    <div class="radio"> 
 
    <label> 
 
     <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false"> 
 
     <span> Afternoon (1 PM - 5 PM)</span> 
 
    </label> 
 
    </div> 
 
    <div class="radio"> 
 
    <label> 
 
     <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)"> 
 
     <span> Evening (5 PM - 9 PM)</span> 
 
    </label> 
 
    </div> 
 
</div>

Answer 2

$(document).ready(function(){ 
 
var testString="Afternoon (1 PM - 5 PM)";//show only this text control and hide other control 
 

 
    $.each($('input[type=radio]'),function(i,v){ 
 
    if($.trim($(v).val())!=testString)// any condtion you can put here 
 
    { 
 
    $(v).addClass("disable").next().addClass("disable"); 
 
    } 
 
    }); 
 
});

.disable 
 
{ 
 
display : none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="fieldset">  
 
<div class="radio"> 
 
      <label > 
 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value="Morning (8 AM - 1 PM)"> 
 
       <span class="">Morning (8 AM - 1 PM)</span> 
 
      </label> 
 
     </div> 
 
     <div class="radio"> 
 
      <label> 
 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Afternoon (1 PM - 5 PM)" aria-invalid="false"> 
 
       <span> Afternoon (1 PM - 5 PM)</span> 
 
      </label> 
 
     </div> 
 
     <div class="radio"> 
 
      <label> 
 
       <input id="wffmd4800a78bba44322993e9ef2a91e0ea0_Sections_9__Fields_3__Value" name="wffmd4800a78bba44322993e9ef2a91e0ea0.Sections[9].Fields[3].Value" type="radio" value=" Evening (5 PM - 9 PM)"> 
 
       <span> Evening (5 PM - 9 PM)</span> 
 
      </label> 
 
     </div> 
 
</div> 
 
</div>