使用Javascript从选择下拉列表中禁用某些选项字段时出现问题

Question

我正在处理一个应用程序，因此我有一些具有选择下拉字段的卡。在卡片上，我需要编写Javascript逻辑，如果用户-

1. 在第一个下拉菜单中选择了一个妻子作为选项，其他卡片中的其余妻子选项应立即隐藏。
2. 从第一个下拉列表中选择了一位丈夫，其他卡片中的其余丈夫选项应立即隐藏。

-基本上，用户应该选择最多一位妻子或一位丈夫

!-- Card 1 -->
    <form method="POST" action="#" id="phase3">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
            <!-- Gender -->
            <div class="row registerRelationph3">
                <label class="fm-input"> Relation :</label>
                <select class="fm-input firstMenu" id="relation1" required>
                    <option value="Husband"> Husband </option>
                    <option value="Wife"> Wife </option>
                    <option value="Son"> Son </option>
                    <option value="Daughter"> Daughter </option>
                </select>
            </div>
            <!-- END -->

            <!-- DOb -->
            <div class="row">
            <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
            <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
            </div>
            <!-- END dob -->
             <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
    </form>
    <!-- End card 1 -->

    <!-- Card 2-->
    <form method="POST" action="#" id="phase3">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
            <!-- Gender -->
            <div class="row registerRelationph3">
                <label class="fm-input"> Relation :</label>
                <select class="fm-input otherMenu" id="relation1" required>
                    <option value="Husband"> Husband </option>
                    <option value="Wife"> Wife </option>
                    <option value="Son"> Son </option>
                    <option value="Daughter"> Daughter </option>
                </select>
            </div>
            <!-- END -->

            <!-- DOb -->
            <div class="row">
                <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
                <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
            </div>
            <!-- END dob -->
             <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
    </form>
    <!-- End card 2-->

    <!-- Card 3-->
    <form method="POST" action="#" id="phase3">
            <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
            <!-- Gender -->
            <div class="row registerRelationph3">
                <label class="fm-input"> Relation :</label>
                <select class="fm-input otherMenu" id="relation1" required>
                    <option value="Husband"> Husband </option>
                    <option value="Wife"> Wife </option>
                    <option value="Son"> Son </option>
                    <option value="Daughter"> Daughter </option>
                </select>
            </div>
            <!-- END -->

            <!-- DOb -->
            <div class="row">
                <label class="fm-input" style="font-size: 10px;"> Date Of Birth :</label>
                <input type="text" id="dob" class="fm-inputph3" placeholder="Date of Birth" value="" required>
            </div>
            <!-- END dob -->
             <button class="btn btn-lg" type="submit"> Save Details <i class="fa fa-check-circle" ></i></button>
    </form>
    <!-- End card 3-->

JavaScript代码

document.querySelector('.firstMenu').addEventListener('change', function () {
    document.querySelector('.otherMenu option[value="Wife"]').disabled = this.value === 'Wife';     
});