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

Question

I have to disable radio button from the given Radio list control based on the condition. The Problem is the Radio button List is auto generated by CMS and id is same on all the list item. How i can apply "disable" class based on the condition. Such as if (some value == am) then show first radio button and disable others two.

<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

Not such a good idea, but you can use jquery to select the radio by the value of the value attribute and disable the relevant radio (using the prop method):

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