CODEWITHSUNDEEP
javascriptjqueryradiobuttonlistdisabled-input
Shailesh
Shailesh

Reputation: 544

Disable radio button in Radio List Control in Jquery

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>

Upvotes: 0

Views: 3449

Answers (2)

Karan Singh
Karan Singh

Reputation: 906

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

Upvotes: 0

Dekel
Dekel

Reputation: 62566

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>

Upvotes: 2

Related Questions