如何正确指定禁用功能的条件?

Question

请帮帮我!有两个块(可以有更多块)，在每个块中有一个复选框，两个选择和一个元素，需要隐藏/显示取决于所选的选择选项。当其中一个复选框被启用时，其中一个选择应该停止隐藏/显示所需的元素，但只在它所在的块中。

根据所选的select选项隐藏/显示所需元素的函数按预期工作。问题是，我不能根据复选框的值正确地指定这些函数将禁用的条件，而且只能在该复选框所在的块中。

我也不能改变HTML，因为这是wordpress。

我应该在"if"让它正常工作?

$(document).on('change', 'input.checkbox', function (evt) {
const variation = evt.target.closest('.variation');
const checkbox = evt.target;
const on = checkbox.matches('input.checkbox:checked') && 'on' === checkbox.value;

if ((variation && on) == true){ // If the checkbox is enabled
console.log('On');
$(document).on('change', '.show select', function (evt) {
const variation = evt.target.closest('.variation');
const select = evt.target;
const showDate = select.matches('[name*="vb"]') && ['notify', 'yes'].includes(select.value); 
variation.querySelector('.date').classList.toggle('visible', showDate);
});
}

else { // If the checkbox is not enabled
console.log('Off');
$(document).on('change', '.vss select', function (evt) {
const variation = evt.target.closest('.variation');
const select = evt.target;
const showDate = select.matches('[name*="vss"]') && 'onbackorder' === select.value;
variation.querySelector('.date').classList.toggle('visible', showDate);
});
}

});

.variations {
padding: 20px;
background-color: #ededed;
font-size: 20px;
}
.variation {
padding: 20px;
background-color: #e3e3e3;
}
.variation:first-child {
background-color: #f5f5f5;
}
.date {
display: none;
}
.date.visible {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="variations">
<div class="variation"><b>First variation</b>
<input type="checkbox" class="checkbox" name="vms[0]">
<div class="show">
select 1
<select style="" id="backorders0" name="vb[0]">    
<option value="no">Do not allow</option>
<option value="notify">Allow but notify client</option> 
<option value="yes" selected>Allow</option>
</select>
</div>
<div>
<p class="vss">
select 2
<select style="" id="vss0" name="vss[0]">
<option value="instock" >In stock</option>
<option value="outofstock">Out of stock</option>
<option value="onbackorder" selected >Pre-order</option>
</select>
</p>
<p class="date"><input value="It needs to be hidden/showed"></p> 
</div>
</div>

<div class="variation"><b>Second variation</b>
<input type="checkbox" class="checkbox" name="vms[1]">
<div class="show">
select 1
<select style="" id="backorders1" name="vb[1]">  
<option value="no" selected>Do not allow</option>
<option value="notify">Allow but notify client</option>
<option value="yes" >Allow</option>
</select>
</div>
<div>
<p class="vss">
select 2
<select style="" id="vss1" name="vss[1]">
<option value="instock" >In stock</option>
<option value="outofstock" selected>Out of stock</option>
<option value="onbackorder" >Pre-order</option>
</select>
</p>
<p class="date"><input value="It needs to be hidden/showed"></p> 
</div>
</div>
</div>

Answer 1

对于这种有很多依赖状态需要管理的问题，我会将所有的管理转移到一个可以封装所有逻辑的函数中。我们可以将容器元素(.variation)传递给函数，这样它就可以只考虑特定变体中的输入。需要更新状态的事件处理程序可以调用此函数，并传递相关的容器元素。下面是一个例子:

const updateState = $variation => {
const $checkbox = $variation.find('input.checkbox');
const $select1 = $variation.find('.show select');
const $select2 = $variation.find('.vss select');

const isChecked = $checkbox.is(':checked');
const select2Val = $select2.val();

$select1.attr('disabled', isChecked);
$select2.attr('disabled', !isChecked);
$variation.find('.date').toggle(isChecked && select2Val === 'onbackorder');
}
$(document).on('change', 'input.checkbox', function () {
const $variation = $(this).closest('.variation');
updateState($variation);
});
$(document).on('change', '.vss select', function () {
const $variation = $(this).closest('.variation');
updateState($variation);
});
$('.variation').each(function () {
updateState($(this));
});

.variations {
padding: 20px;
background-color: #ededed;
font-size: 20px;
}
.variation {
padding: 20px;
background-color: #e3e3e3;
}
.variation:first-child {
background-color: #f5f5f5;
}
.date {
display: none;
}
.date.visible {
display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="variations">
<div class="variation"><b>First variation</b>
<input type="checkbox" class="checkbox" name="vms[0]">
<div class="show">
select 1
<select style="" id="backorders0" name="vb[0]">
<option value="no">Do not allow</option>
<option value="notify">Allow but notify client</option>
<option value="yes" selected>Allow</option>
</select>
</div>
<div>
<p class="vss">
select 2
<select style="" id="vss0" name="vss[0]">
<option value="instock">In stock</option>
<option value="outofstock">Out of stock</option>
<option value="onbackorder" selected>Pre-order</option>
</select>
</p>
<p class="date"><input value="It needs to be hidden/showed"></p>
</div>
</div>
<div class="variation"><b>Second variation</b>
<input type="checkbox" class="checkbox" name="vms[1]">
<div class="show">
select 1
<select style="" id="backorders1" name="vb[1]">
<option value="no" selected>Do not allow</option>
<option value="notify">Allow but notify client</option>
<option value="yes">Allow</option>
</select>
</div>
<div>
<p class="vss">
select 2
<select style="" id="vss1" name="vss[1]">
<option value="instock">In stock</option>
<option value="outofstock" selected>Out of stock</option>
<option value="onbackorder">Pre-order</option>
</select>
</p>
<p class="date"><input value="It needs to be hidden/showed"></p>
</div>
</div>
</div>