我必须根据条件从给定的单选列表控件中禁用单选按钮。问题是单选按钮列表是由CMS自动生成的,并且所有列表项上的ID都相同。我如何根据条件应用"禁用"类。例如如果(某些值== 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>
这不是一个好主意,但您可以使用 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>