在为循环中该选择器的所有实例选择（在任何选择器中）后临时禁用特定选项

Question

我的 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();

                });

我没有在文件中包含所有代码，只包含相关部分。

预期：如果为第一人选择了 relationship_select 中的“配偶”选项，则为所有人的 relationship_select 暂时禁用此选项。但是，如果在第 2-6 个人中选择了“配偶”选项，它仍然允许您为任何其他人选择此选项。

实际：如果为任何人选择了 relationship_select 中的“配偶”选项，请在所有 relationship_select 选择器（针对每个人）中暂时禁用此选项。

Answer 1

让我试着帮助你。首先，如评论中所述，您必须onchange从循环中删除处理程序，并且必须使其select&nbsp;id独一无二。（使用$i变量）。然后在创建选择之后，您必须使用event-delegation api处理它们的更改。关于更改处理程序的几句话。如果我正确理解了您的要求，您必须禁用所有非首选选项的所有“配偶”选项。所以处理程序正在检查选择是否是第一个，以及它是否prop('disabled')基于第一个选择值进行设置。如果我错误地理解了您的要求，请随时纠正我。&nbsp; $(document).on('change', '.select', function() {&nbsp; const selects = $('.select');&nbsp; const doesAnyoneIsSpouse = selects.filter(function(key) {return $(selects[key]).val() === '1';&nbsp; }).length > 0;&nbsp; $('.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;">&nbsp; &nbsp;<option value=""></option>&nbsp; &nbsp;<option value='0'>Child</option>&nbsp; &nbsp;<option value='1'>Spouse</option>&nbsp;</select>&nbsp;<select tabindex="" id="relationship_select" class="select" name="prgm_person[1][person_relationship_id]" style="width: 110px;">&nbsp; &nbsp;<option value=""></option>&nbsp; &nbsp;<option value='0'>Child</option>&nbsp; &nbsp;<option value='1'>Spouse</option>&nbsp;</select>&nbsp;<select tabindex="" id="relationship_select" class="select" name="prgm_person[2][person_relationship_id]" style="width: 110px;">&nbsp; &nbsp;<option value=""></option>&nbsp; &nbsp;<option value='0'>Child</option>&nbsp; &nbsp;<option value='1'>Spouse</option>&nbsp;</select>&nbsp;<select tabindex="" id="relationship_select" class="select" name="prgm_person[3][person_relationship_id]" style="width: 110px;">&nbsp; &nbsp;<option value=""></option>&nbsp; &nbsp;<option value='0'>Child</option>&nbsp; &nbsp;<option value='1'>Spouse</option>&nbsp;</select>