在Jquery中的无线电列表控制中禁用单选按钮

问题描述：

我必须根据条件禁用来自给定无线电列表控制的单选按钮。问题是单选按钮列表是由CMS自动生成的，并且所有列表项上的ID都相同。我如何根据条件应用“禁用”类。如if（some value == am）则显示第一个单选按钮并禁用其他两个。在Jquery中的无线电列表控制中禁用单选按钮

<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>

它由Sitecore为营销人员生成Web表单。它生成相同的ID – Shailesh

答

不是个好主意，但你可以使用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>

答

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

在Jquery中的无线电列表控制中禁用单选按钮

相关推荐