Отключить радиокнопку в управлении списком радио в JQuery

Question

Мне нужно отключить радиокнопку из данного элемента управления списком радиостанций в зависимости от состояния. Проблема заключается в том, что список радиостанций автоматически генерируется CMS, а идентификатор - во всех элементах списка. Как я могу применить класс «disable» на основе условия. Например, если (какое-то значение == am), тогда отобразите первый переключатель и отключите другие два.

<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

Не такая хорошая идея, но вы можете использовать JQuery для выбора радио значения атрибута value и отключить соответствующее радио (с использованием методы prop):

$('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>