在jQuery的单选列表控件中禁用单选按钮

Question

我必须根据条件从给定的“单选”列表控件中禁用单选按钮。 问题在于单选按钮列表是由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>

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>