-1

这是我的代码，我想使用按数据属性获取元素来禁用选择性复选框，这是我的网页加载后我在网页中拥有的“data-wapf-label”，所以我应用了禁用的类但没有工作

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

4

2 回答 2

1

只是你的选择器上的一个错误：

  1. 中的字符串data-wapf-label是区分大小写的，因此请像在您的 html 中一样进行调整。

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

如果添加i ，则不区分大小写：

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

于 2021-02-13T15:03:02.763 回答
-1 
let $selector = $('.wapf-swatch');
let $item = '.wapf-input';
$selector.each(function() {
    $(this).find($item).attr("data-wapf-label","haribo strawberry").prop('disabled', true);
});
于 2021-02-13T15:04:29.613 回答