javascript - 在循环中为该选择器的所有实例选择(在任何选择器中)特定选项后，暂时禁用该选项

Question

我的 php 代码有一个 html 模板文件，它循环 6 个人的一系列字段(名字、姓氏、出生日期等)。这些字段之一是“关系”选择器，选项为:“配偶”或“ child ”。如果选择“配偶”，我想在关系选择器中为所有人暂时禁用此选项。如果未选择配偶，则可以在任何人员的关系选择器中选择此选项。

我已经非常接近解决问题了。我正在使用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>

...

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

预期:如果为第一人选择了关系选择中的“配偶”选项，则为所有人员的关系选择暂时禁用此选项。但是，如果在 2-6 人中选择“配偶”选项，您仍然可以为任何其他人选择此选项。

实际:如果为任何人选择了“关系选择”中的“配偶”选项，则在所有关系选择选择器中(针对每个人)暂时禁用此选项。

Answer 1

让我尽力帮助你。首先，正如评论中提到的，您必须从循环中删除 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>