提问人:David Garcia 提问时间:3/24/2023 最后编辑:Atena DadkhahDavid Garcia 更新时间:3/24/2023 访问量:38
如果不符合条件,则阻止复选框
Prevent checkbox if doesn't meet the condition
问:
我有一个复选框列表,在输入元素中我添加了 2 个自定义属性
默认情况下,该复选框处于禁用状态,其想法是,如果对象与 then 的值匹配,则启用,但它不起作用。svcjurisdiction
rcpjurisdiction
$('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/>
答:
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/>
引用:
评论
Guernsey
svcjurisdiction
(svcjurisdiction.includes(rcpjurisdiction)
" Guernsey"