如果不符合条件,则阻止复选框

Prevent checkbox if doesn't meet the condition

提问人:David Garcia 提问时间:3/24/2023 最后编辑:Atena DadkhahDavid Garcia 更新时间:3/24/2023 访问量:38

问:

我有一个复选框列表,在输入元素中我添加了 2 个自定义属性

默认情况下,该复选框处于禁用状态,其想法是,如果对象与 then 的值匹配,则启用,但它不起作用。svcjurisdictionrcpjurisdiction

$('input[type=checkbox]').each(function() {
    var svcjurisdiction = $(this).attr("data-svcjurisdiction").split(',');
    var rcpjurisdiction = $(this).attr("data-rcpjurisdiction");

    console.log(svcjurisdiction)
    if (svcjurisdiction.includes(rcpjurisdiction)) {
        console.log(rcpjurisdiction)
        $(this).attr("disabled", false)
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Guernsey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>

JavaScript jQuery 对象

评论

0赞 David Garcia 3/24/2023
所以 rcpjurisdiction 包含一个字符串,我想检查对象是否包含这个字符串,这是不正确的吗?Guernseysvcjurisdiction(svcjurisdiction.includes(rcpjurisdiction)
3赞 David Garcia 3/24/2023
啊等等,里面有一个空格,这就是我不匹配的原因" Guernsey"

答:

1赞 David Thomas 3/24/2023 #1

下面是一种方法,代码中带有解释性注释:

// selecting each <input> of type=checkbox, iterating over the collection using the each() method:
$('input[type=checkbox]').each(function() {
  // retrieving a reference to the named attributes, converting the String of
  // "data-svcjurisdiction" to a two-part Array, using String.prototype.split():
  let svcjurisdiction = $(this).attr("data-svcjurisdiction").split(',');
  let rcpjurisdiction = $(this).attr("data-rcpjurisdiction");

  // here we update the 'disabled' property of the current <input> element; we use Array.prototype.some()
  // to test whether any of the Array-elements includes the string held in the rcpjurisdiction variable;
  // as Array.prototype.some() returns a Boolean to indicate that matches were found (true) or not-found
  // (false), we invert that property using the not-operator to disable or enable the element:
  $(this).prop('disabled', !svcjurisdiction.some((svc) => svc.includes(rcpjurisdiction)));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Guernsey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>
<!--
  adding a second <input> deliberately ensuring its "data-rcpjurisdiction" attribute-value is
  not present in the "data-svcjurisdiction" attribute:
-->
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Jersey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>

原始代码的问题是

$('input[type=checkbox]').each(function() {
    var svcjurisdiction = $(this).attr("data-svcjurisdiction").split(',');
    var rcpjurisdiction = $(this).attr("data-rcpjurisdiction");

    // Array.prototype.includes() requires an exact
    // match, unfortunately after splitting on ','
    // the Array of strings included leading whitespace,
    // which prevented a successful match:
    if (svcjurisdiction.includes(rcpjurisdiction)) {

        $(this).attr("disabled", false)
    }

});

顺便说一句,如果您愿意,只需使用纯 JavaScript 即可轻松完成:

const D = document,
      get = (selector, context = D) => context.querySelector(selector),
      getAll = (selector, context = D) => [...context.querySelectorAll(selector)];

// selecting each <input> of type=checkbox, iterating over the collection using the Array.prototype.forEach() method:
getAll('input[type=checkbox').forEach(
  (elem) => {
    // using destructuring assignment to retrieve the two custom data-* attributes from
    // the elem.dataset Object:
    let {rcpjurisdiction, svcjurisdiction} = elem.dataset,

    // we split the data-svcjurisdiction attribute-value on the comma character,
    // using String.prototype.split() to generate an Array and we then iterate
    // over that Array using Array.prototype.map() to create a new Array:
    svc = svcjurisdiction.split(',').map(
      // we pass in the current Array of the Array of Strings ('str'),
      // and in the function body we use String.prototype.split() to
      // remove leading/trailing whitespace:
      (str) => str.trim()
    );
    // we then set the disabled property of the element to be the inverse
    // of the Boolean returned from Array.prototype.includes(), which returns
    // true of the string is included and false if it is not (we invert this
    // because you wish to enable the <input> if there is a match and we're
    // working with the disabled property):
    elem.disabled = !svc.includes(rcpjurisdiction);
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Guernsey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>
<!--
  adding a second <input> deliberately ensuring its "data-rcpjurisdiction" attribute-value is
  not present in the "data-svcjurisdiction" attribute:
-->
<input class="services" value="13301686-3218159" data-rcpjurisdiction="Jersey" data-svcjurisdiction="SCPB - LON, Guernsey" type="checkbox" title="Text to show" checked disabled/>

引用: