jquery 页面禁用,启用 以及属性禁用, 让form表单解决一些问题的记录

1.问题描述

----------------------------------------------------------分割线------------------------------------------------------
因为标签的几个属性一样, 导致提交form表单的时候, 有多个标签, 所以变成数组了, 而后端只需要一个值, 你问为什么会这样, 我也不知道, 产品就这么设计的…

但是问题还是要解决, 那么来看看怎么用一个点击事件和属性来解决这个问题

2.代码

1.这就是为什么上面的form表单提交时, 输入框的数据变成了数组, 因为name一致
吐槽: 当初设计的时候就没弄好, 所以良好的设计很重要

			<div>
                <div>
                    <label style="width: auto">用户结清费用：</label></br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="1" onclick="ruleConfig.radioClick(this.value)"/>费率*放款金额  <input hidden type="number" id="userOverAmountRuleFee1" name="userOverAmountRuleFee" onchange="ruleConfig.checkNumberValue(this)" placeholder="请填写"/>（%）</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="2" onclick="ruleConfig.radioClick(this.value)"/>剩余本金+最多三期利息</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="3" onclick="ruleConfig.radioClick(this.value)"/>剩余冻结金额</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="4" onclick="ruleConfig.radioClick(this.value)"/>剩余本金+剩余本金*费率  <input hidden type="number" id="userOverAmountRuleFee4" name="userOverAmountRuleFee" onchange="ruleConfig.checkNumberValue(this)" placeholder="请填写"/>（%）</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="5" onclick="ruleConfig.radioClick(this.value)"/>剩余本金+冻结金额*费率  <input hidden type="number" id="userOverAmountRuleFee5"name="userOverAmountRuleFee" onchange="ruleConfig.checkNumberValue(this)" placeholder="请填写"/>（%）</br></br>
                    <input style="width: 50px;" type="radio" name="userOverAmountRule" value="6" onclick="ruleConfig.radioClick(this.value)"/>剩余本金+放款金额*费率  <input hidden type="number" id="userOverAmountRuleFee6" name="userOverAmountRuleFee" onchange="ruleConfig.checkNumberValue(this)" placeholder="请填写"/>（%）</br></br>
                </div>
            </div>

2.使用点击事件, 来获取单选框的选中值, 来为input设置显示隐藏属性, 以及disabled属性, 这个挺重要的, 禁用后, form表单才不会把它当做一个提交值, 就不会变成数组.
吐槽: 虽然用法有点憨, 但问题解决了

		ruleConfig.radioClick = function (value) {
                if (value){
                    var fee1 = "userOverAmountRuleFee"+value;
                    var fee2 = "userOverAmountRuleFee"+value+value;
                    var inputArr = $("input[name='userOverAmountRuleFee']");
                    inputArr.each(function (index, obj) {
                        var id = obj.id;
                        if(!(id === fee1 || id === fee2)){
                            var elementHide = $("#"+id);
                            elementHide.val("");
                            elementHide.hide();
                            elementHide.attr("disabled",true);
                        } else {
                            var elementShow = $("#"+id);
                            elementShow.val("");
                            elementShow.show();
                            elementShow.attr("disabled",false);
                        }
                    })
                }
            }

3.修改后的效果

4.其他的话

这个功能, 主要还是偏向定制化的效果, 一般也可能碰不到这种问题的, 所以, 主要还是记录这个问题, 以及给大家提供一个解决问题的思路。