0

我有一个<select>三个选项，称为select, Scheme1, Scheme2。基于对方案＃的选择，我必须切换Checkboxes（对于方案 1）和radio按钮（对于方案 2）。

在此处输入图像描述 在此处输入图像描述

案例1：当我选择Scheme1选项并选中两个 (B和C)checkboxes时，没关系。

情况2：当我选择Scheme2选项并选中radio按钮并选择B选项时。

现在，如果我再次选择Scheme1，我失去了之前对两个复选框 A 和 B 的选择，如果我选择Scheme2，我也失去了B从单选按钮中选择的选项。

我该如何处理。目前每次我绘制新的复选框列表和单选按钮列表。

如何维护复选框和单选按钮的状态？

我有以下 HTML 代码

<html>
<head>
</head>
<body>

<select name="sltScheme" onchange="funCall(this.value)">
    <option value="select">Select Scheme</option>
    <option value="Scheme1">Scheme 1</option>
    <option value="Scheme2">Scheme 2</option>
</select>

<!-- will be displayed when Scheme 1 is selected but will be overwritten by Radio buttons-->
<div id="schemeContainer" style="display: block; visibility: visible;">
    <span id="ele_0">
        <input name="schemeType[]" type="checkbox" value="1">
    </span>
    <lable>A<br></lable>
    <span id="ele_1">
        <input name="schemeType[]" type="checkbox" value="2">
    </span>
    <lable>B<br></lable>
    <span id="ele_2">
        <input name="schemeType[]" type="checkbox" value="3">
    </span>
    <lable>C<br></lable>
</div>

<!--This separate DIV is just for illustration purpose only. Actually Radio buttons will be overwritten by Checkboxes and vice versa-->

<!-- will be displayed when Scheme 2 is selected but will be overwritten by Checkboxes-->
<div id="schemeContainer" style="display: block; visibility: visible;">
    <span id="ele_0">
        <input name="schemeType[]" type="radio" value="1">
    </span>
    <lable>A<br></lable>
    <span id="ele_1">
        <input name="schemeType[]" type="radio" value="2">
    </span>
    <lable>B<br></lable>
    <span id="ele_2">
        <input name="schemeType[]" type="radio" value="3">
    </span>
    <lable>C<br></lable>
</div>


</body>
</html>

而且我有以下 JavaScript/jQuery 代码（请注意，我添加了 jQuery 库，所以不要与 HTML 代码混淆）

<script>
    function funCall(schemeType)
    {
        var obj = jQuery("input[name='schemeType[]']");
        if(schemeType == "scheme1")
        {
            for(i=0;i<obj.length;i++)
            {
                var eleval = obj[i].value;
                jQuery("#ele_"+i).each(function(i) {
                    jQuery(this).html('<input value = "'+eleval+'" type="checkbox" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
                });
                obj[i].checked = false;
            }
        }
        else if(schemeType == "scheme2")
        {
            for(i=0;i<obj.length;i++)
            {
                jQuery("#ele_"+i).each(function(i) {
                    jQuery(this).html('<input value = "'+eleval+'"  type="radio" name="'+obj[i].name+'" id="'+obj[i].id+'"/>');
                });
            }
        }
    }
</script>

编辑：

我已经id从复选框和单选按钮中删除了属性，因为使用了name属性。

编辑2：

我在这里展示了 2 个具有相同 id 的 div，<div id="schemeContainer"仅用于说明目的。实际上应该只有一个 DIV 而不是两个。我将仅替换该单个 div 中的单选框和复选框。

4

2 回答 2

1

您必须在此处更改一些代码：

1）。更改 div id（单选按钮容器组）

<div id="schemeContainer1" style="display: block; visibility: visible;">
    .......
</div>

2）。更改 div id（复选框按钮容器组）

<div id="schemeContainer2" style="display: block; visibility: visible;">
   .....
</div>

3）。更改 JavaScript 以根据部分显示隐藏单选或复选框容器。

function funCall(schemeType)
{
    if(schemeType == "Scheme1")
    {
        jQuery("#schemeContainer1").show();
        jQuery("#schemeContainer2").hide();
    }
    else if(schemeType == "Scheme2")
    {
        jQuery("#schemeContainer1").hide();
        jQuery("#schemeContainer2").show();
    }
    else
    {
        jQuery("#schemeContainer2").show();
        jQuery("#schemeContainer1").show();
    }
}
于 2013-05-28T10:35:08.940 回答
1

如果我正确阅读了您的 html 评论，问题不在于您不能拥有两个 div，而是您不希望在最终发送表单时同时提交两个 div。我会考虑 Raskesh 的解决方案（使用切换来显示和隐藏已选择的选项），但添加一个禁用表单元素被隐藏并在可见时启用，以便在提交时服务器不会处理禁用的字段集。

此外，如果您对仅 HTML5 的解决方案感到满意，fieldset现在可以采用一个disabled属性来禁用其中的所有后代表单控件，从而无需循环通过复选框来禁用每个控件。

这是一种使 jquery 代码更轻巧的方法：将所有可交换的表单字段包装在具有共享类（如“swappable”）的字段集中，并将它们设置为显示/隐藏。然后有一个函数监听字段集何时变为可见/隐藏，并且 a) 将字段集设置为禁用（隐藏时）或不禁用（可见时）HTML5 浏览器，并且还有一个选择器用于所有表单字段类型的字段集的后代被隐藏并具有可交换类并设置/取消设置特定字段的禁用属性。通过为所有可交换包装器使用一个类，您不仅可以更轻松地选择字段，还可以避免意外禁用有意隐藏的字段。如果您合并了modernizr，则如果fieldset 接受disabled 属性，则可以跳过每个字段的禁用。

于 2013-05-28T10:42:29.310 回答