[英]Disable radio button in Radio List Control in Jquery
我必須根據條件從給定的“單選”列表控件中禁用單選按鈕。 問題在於單選按鈕列表是由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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.