Search code examples
javascripthtmljqueryradio-button

How to disable Class inside Input(Radio) Button in Jquery


I need to Disable KG Value Radio button using qusweitstnesel class name. Here is my code

HTML

<li id="field_1_48" class="gfield qusweitstnesel gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: list-item;">
<label class="gfield_label">Weight<span class="gfield_required">*</span></label>
<div class="ginput_container ginput_container_radio">
<ul class="gfield_radio" id="input_1_48">
<li class="gchoice_1_48_0">
<input name="input_48" value="KG" id="choice_1_48_0" tabindex="13" disabled="disabled" class="gf-default-disabled" type="radio">
<label for="choice_1_48_0" id="label_1_48_0">KG</label>
</li>
<li class="gchoice_1_48_1">
<input name="input_48" value="Stone" checked="checked" id="choice_1_48_1" tabindex="14" type="radio">
<label for="choice_1_48_1" id="label_1_48_1">Stone</label>
</li>
</ul>
</div>
</li>

JQuery :

var kgs="KG";
jQuery(".qusweitnotsel .ginput_container_radio .gfield_radio li input[type=radio][value='+ kgs +']").attr("disabled","disabled"); 

Solution

  • You have to use double quotes inside single quotes in [value='"+ kgs +"'].

    Please Note: You already have disabled property set to the radio button in the HTML. You also have typo in the class name used in code as qusweitnotsel....should be qusweitstnesel

    var kgs="KG";
    jQuery(".qusweitstnesel .ginput_container_radio .gfield_radio li input[type=radio][value='"+ kgs +"']").attr("disabled","disabled");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
    <li id="field_1_48" class="gfield qusweitstnesel gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: list-item;">
      <label class="gfield_label">Weight<span class="gfield_required">*</span></label>
      <div class="ginput_container ginput_container_radio">
        <ul class="gfield_radio" id="input_1_48">
          <li class="gchoice_1_48_0">
            <input name="input_48" value="KG" id="choice_1_48_0" tabindex="13" class="gf-default-disabled" type="radio">
            <label for="choice_1_48_0" id="label_1_48_0">KG</label>
          </li>
          <li class="gchoice_1_48_1">
            <input name="input_48" value="Stone" checked="checked" id="choice_1_48_1" tabindex="14" type="radio">
            <label for="choice_1_48_1" id="label_1_48_1">Stone</label>
            </li>
        </ul>
      </div>
    </li>

    You also can use Template Literals which allows embedded expressions:

    var kgs="KG";
    jQuery(`.qusweitstnesel .ginput_container_radio .gfield_radio li input[type=radio][value=${kgs}]`).attr("disabled","disabled");
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
    <li id="field_1_48" class="gfield qusweitstnesel gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible" style="display: list-item;">
      <label class="gfield_label">Weight<span class="gfield_required">*</span></label>
      <div class="ginput_container ginput_container_radio">
        <ul class="gfield_radio" id="input_1_48">
          <li class="gchoice_1_48_0">
            <input name="input_48" value="KG" id="choice_1_48_0" tabindex="13" class="gf-default-disabled" type="radio">
            <label for="choice_1_48_0" id="label_1_48_0">KG</label>
          </li>
          <li class="gchoice_1_48_1">
            <input name="input_48" value="Stone" checked="checked" id="choice_1_48_1" tabindex="14" type="radio">
            <label for="choice_1_48_1" id="label_1_48_1">Stone</label>
            </li>
        </ul>
      </div>
    </li>