选择IVF受精NO单选按钮时自动禁用卵子来源单选按钮的实现问题

更新说明 #

2021年10月21日更新 - 我仍未找到可行的解决方案。

需求描述 #

我共有4个单选按钮，需要实现的交互逻辑为：

• 当选择「IVF fertilization」选项组的NO选项时，自动禁用「if IVF ovum」字段下的两个选择项
• 当选择YES选项时，「if IVF ovum」下的两个选择项保持可用状态

现有实现无法达到预期效果，可视化示例如下：

<-- IVF fertilization -->
⬜ Yes
⬜ No

<-- if IVF ovum -->
⬜ Own
⬜ From a donor

现有代码片段 #

1. PHP基础代码 #

<!-- IVF fertilization -->
<div class='col-sm-4'>
    <?=_('IVF fertilization')?>
    <div>
        <input type="radio" id="yesFe" name="niptData_ivfFertilization" value='1' 
            <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '1' OR $registration->test->data->ivfFertilization == '1') ? 'checked' : ''?>
        > 
        <label for="yesFe" class='smallLabel'><?=_('Yes')?></label> 
    </div>

    <div>
        <input type="radio" id="noFe" name="niptData_ivfFertilization" value='0' 
            <?=($_SESSION['REQUEST']['niptData_ivfFertilization-required0allow'] == '0' OR $registration->test->data->ivfFertilization == '0') ? 'checked' : ''?>
        > 
        <label for="noFe" class='smallLabel'><?=_('No')?></label> 
    </div>
</div>

<!-- if IVF ovum -->
<div class='col-sm-4'>
    <?=_('If IVF ovum')?>
    <div>
        <input type="radio" id="ownOv" name="niptData_ovum" value='1' data-validation="" 
            <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '1' OR $registration->test->data->ovum == '1') ? 'checked' : ''?>
        > 
        <label for="ownOv" class='smallLabel'><?=_('Own')?></label> 
    </div>

    <div>
        <input type="radio" id="fromADonor" name="niptData_ovum" value='2' data-validation="" 
            <?=($_SESSION['OPTIONAL']['niptData_ovum'] == '2' OR $registration->test->data->ovum == '2') ? 'checked' : ''?>
        > 
        <label for="fromADonor" class='smallLabel'><?=_('From a donor')?></label> 
    </div>
    <br>
</div>

2. 现有功能脚本 #

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $('#new_user_form *').filter(':radio').change(function() {
            if(this.id=='noFe' && this.value=='0' && $(this).is(':checked')) {
                $('#new_user_form *').filter(':radio').each(function(){
                    if(this.id=='noFe' && this.value=='0') {
                    } else {
                        $(this).attr("checked",false);
                    }
                });
            }
            if((this.id=='ownOv' || this.id=='fromADonor' && this.value=='0') {
                var checkedId = this.id;
                var checkedOrNot = $(this).is(':checked');
                $('#new_user_form *').filter(':radio').each(function(){
                    if(this.id==checkedId && (this.value=='1' || this.value=='2')) {
                        if(checkedOrNot) {
                            $(this).attr("disabled",true);
                        } else {
                            $(this).attr("disabled",false);
                        }
                    }
                });
</script>

3. 实际渲染HTML代码 #

<div class="col-sm-4">
                Pregnancy<span class="required">*</span>
                <div class="has-error">
                <input type="radio" id="yesFe" name="niptData_ivfFertilization-required0allow" value="1" data-validation="required" class="error" style="border-color: rgb(185, 74, 72);"> 
                <label for="yesFe" class="smallLabel">Yes</label> 
                <span class="help-block form-error">Required field</span></div>

                <div class="has-success">
                <input type="radio" id="noFe" name="niptData_ivfFertilization-required0allow" value="0" data-validation="required" class="valid" style=""> 
                <label for="noFe" class="smallLabel">No</label> 
                </div>
            </div>


<div class="col-sm-4">
                if FIVET, ovum<span class="optional"></span>
                <div>
                <input type="radio" id="ownOv" name="niptData_ovum" value="1" data-validation=""> 
                <label for="ownOv" class="smallLabel">Own</label> 
                </div>

                <div>
                <input type="radio" id="fromADonor" name="niptData_ovum" value="2" data-validation=""> 
                <label for="fromADonor" class="smallLabel"> 
As a donor</label> 
                </div>
                <br>
            </div>

修复方案 #

原有脚本存在逻辑错误、未处理初始状态、选择器冗余的问题，可直接替换为以下脚本：

$(document).ready(function () {
    // 切换ovum选项组禁用状态的公共函数
    function switchOvumStatus() {
        let ivfNoSelected = $('#noFe').is(':checked');
        // 设置禁用状态
        $('#ownOv, #fromADonor').prop('disabled', ivfNoSelected);
        // 禁用时清空已选状态，避免提交脏数据
        if(ivfNoSelected) {
            $('#ownOv, #fromADonor').prop('checked', false);
        }
    }

    // 页面加载完成先执行一次，适配初始选中状态
    switchOvumStatus();

    // 监听IVF选项组的变更事件
    // 同时兼容PHP定义和实际渲染的两个不同name属性，可根据实际使用场景删除不需要的项
    $('input[name="niptData_ivfFertilization"], input[name="niptData_ivfFertilization-required0allow"]').on('change', function() {
        switchOvumStatus();
    });
});

注意事项 #

处理布尔属性（disabled、checked）时使用prop方法替代attr，适配jQuery不同版本的属性处理逻辑，避免出现属性设置不生效的问题。

内容的提问来源于stack exchange，提问作者WIPER