javascript - 在为循环中该选择器的所有实例选择(在任何选择器中)特定选项后,暂时禁用该选项
问题描述
我的 php 代码有一个 html 模板文件,它为 6 个人循环了一系列字段(名字、姓氏、出生日期等)。这些字段之一是“关系”选择器,选项有:“配偶”或“孩子”。如果选择了“配偶”,我想在所有人的关系选择器中暂时禁用此选项。如果没有选择配偶,则可以在任何人的关系选择器中选择此选项。
我非常接近解决问题。我正在使用 jquery(下面的代码),并且代码执行我想要它做的事情。唯一的问题是它只查看我循环中的第一个人。如果我为 2-6 个人选择“配偶”,它仍然允许我为他们关系选择中的任何其他人选择此选项。如果在任何选项中选择它,我希望对所有人禁用它。
<table>
<!-- People -->
<?php for ($i = 0; $i < $people_max; $i++) { ?>
<tr>
<td class="title" colspan="2">
<h2>PERSON <?= $i+1; ?></h2>
</td>
</tr>
...
<tr>
<td class="name<?= $carl_msg->getFieldMessageStyle($i . '-person_relationship_id'); ?>">Relationship:</td>
<td class="value">
<select tabindex="" id="relationship_select" class="select" onchange="disableSpouseOptionWhenSelected()" name="prgm_person[<?= $i; ?>][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<?php foreach ($selects['people'] as $person) { ?>
<option id="option" value="<?= $person['person_relationship_id']; ?>" <?php if ($person['person_relationship_id'] == $html['prgm_person'][$i]['person_relationship_id']) { ?>selected<?php } ?>><?= $person['person_relationship_name']; ?></option>
<?php } ?>
</select>
</td>
</tr>
...
<?php } ?>
<tr>
<td class="value">
<br />
<!-- Enable the top update buttons -->
<script language="JavaScript">
$(document).ready(function() {
disableSpouseOptionWhenSelected();
});
function disableSpouseOptionWhenSelected() {
$('select:first').on('change', function () {
$('option[value=1]').prop('disabled', this.value === '1');
});
}
</script>
</td>
<td></td>
</tr>
……
我没有在文件中包含所有代码,只包含相关部分。
预期:如果为第一个人选择了relationship_select 中的“配偶”选项,则暂时为所有人的relationship_selects 禁用此选项。但是,如果在第 2-6 个人中选择了“配偶”选项,它仍然允许您为任何其他人选择此选项。
实际:如果为任何人选择了relationship_select 中的“配偶”选项,则在所有relationship_select 选择器中暂时禁用此选项(对于每个人)。
解决方案
让我试着帮助你。首先,正如评论中提到的,您必须onchange
从循环中删除处理程序,并且您必须使其select
id
独一无二。(使用$i
变量)。然后在创建选择后,您必须使用event-delegation api处理它们的更改。
关于更改处理程序的几句话。如果我正确理解了您的要求,您必须禁用所有非首选选项的所有“配偶”选项。所以处理程序正在检查选择是否是第一个,以及它是否是prop('disabled')
基于第一个选择值的设置。如果我错误地理解了您的要求,请随时纠正我。
$(document).on('change', '.select', function() {
const selects = $('.select');
const doesAnyoneIsSpouse = selects.filter(function(key) {
return $(selects[key]).val() === '1';
}).length > 0;
$('.select').not(this).find('option[value="1"]').prop('disabled', doesAnyoneIsSpouse);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[0][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[1][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[2][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[3][person_relationship_id]" style="width: 110px;">
<option value=""></option>
<option value='0'>Child</option>
<option value='1'>Spouse</option>
</select>
推荐阅读
- python - 使用 Python 条件变量的有界大小队列的生产者消费者
- xslt - 使用带有嵌套节点的 XSLT 转换 XML
- android - 使用类 ContextWrapper 更改语言 Android 应用程序在发布模式下不起作用
- sql - 将变量放入方程中会对其值进行四舍五入
- xml - 关于使用 XSLT 优化 XML 循环的建议
- emacs - 如何防止在recentf列表中处理和列出的窥视文件?
- excel - 在表中查找一行并从用户窗体中插入值
- jenkins - 詹金斯管道分支
- flutter - 如何在飞镖代码中执行颤振终端命令
- forms - 基于表单编辑/提交的表格中的自动增量问题