Get element by data attribute using label and add disabled class

Question

here is my code here i want to disable the selective checkbox using get element by data attribute which is that "data-wapf-label" which I had in my webpage once my web page loads so i applied the disabled class but did not worked

 $('.wapf-input[data-wapf-label="haribo strawberry"]').addClass('disabled');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Strawberry</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span> Strawberr1</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo11</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo111</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo12</span></span> </div>

Answer 1

just an error on your selector:

1. the string in data-wapf-label is cas sensitive, so adapt like in your html.

    $('input[data-wapf-label="Haribo Strawberry"]').addClass('disabled').prop('disabled', true);

if you add i you'll have case insensitive:

    $('input[data-wapf-label="haribo strawberry" i]').addClass('disabled').prop('disabled', true);

 $('input[data-wapf-label="haribo strawberry" i]').prop('disabled', true). parent().closest('div').addClass("disabled"); $('div').each(function(){ console.log($(this).attr("class")); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Strawberry</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span> Strawberr1</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo11</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo111</span></span> </div> <div class="wapf-swatch wapf-swatch--image wapf-checked"> <input type="hidden" class="wapf-tf-h" data-fid="5fd25d21855fd" value="0" name="wapf[field_5fd25d21855fd][]"> <input type="checkbox" name="wapf[field_5fd25d21855fd][]" class="wapf-input" data-field-id="5fd25d21855fd" value="kd4ik" data-wapf-label="Haribo Strawberry" data-is-required="" data-maxc=""> <span class="wapf-ttp"><span>Haribo12</span></span> </div>

Answer 2

let $selector = $('.wapf-swatch');
let $item = '.wapf-input';
$selector.each(function() {
    $(this).find($item).attr("data-wapf-label","haribo strawberry").prop('disabled', true);
});