1

我有 2 个单选按钮，我通过单选按钮使一些字段处于活动/非活动状态。但是当我通过 ajax 从表单发送数据然后第二次打开我的表单而不重新加载页面时，单选按钮已损坏，即它们不提供活动/非活动功能。因此，例如，当我单击按钮 2 时，field3 变为活动状态，我输入所需的数据并通过 ajax 将其发送到服务器，但是当我第二次打开对话框时，单选按钮 2 仍然处于活动状态并且当我尝试更改 ot到单选按钮 1 字段 1,2 仍然处于非活动状态，但是当我重新加载页面时，一切正常。怎么了？这是我的html代码：

<a href="javascript:void(0)" class="add">click here</a>

<div id="dialog-form" title="title">
    <p class="validateTips">All form fields matched with (*) are required</p>
    <form>
        <fieldset>
            <div>
                <div>
                    <label for="name">Name(*)</label>
                    <textarea id="myName" class="text ui-widget-content ui-corner-all"></textarea>
                </div>
            </div>
            <div>
                <label for="perc">percent(*)</label>
                <input type="number" id ="perc"  step="0.5" />
            </div>
            <div> 
            <table>
                <tr>
                <td>
                    <input type="radio" id="but1" name="group1" value="1">1<br>
                </td>
                <td>
                    <input type="radio" id="but2" name="group1" value="2">2<br>
                </td>
                </tr>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <label for="field1">field1 (*)</label>    
                                <input type="text" id="field1" value="" class="group1" > <br>    
                            </tr>
                            <tr>
                                <label for="field2">field2 (*)</label>    
                                <input type="text" id="field2" value="" class="group1" > <br>    
                            </tr>

                        </table>
                    </td>
                    <td>
                            <label for="field3">field3 (*)</label>
                            <input id="field3" type="text" value="" class="group2" >
                    </td>
                </tr>
            </table>
           </div>


        </fieldset>
    </form>
</div>

这是 jQuery 代码，它通过单选按钮更改字段的活动：

$(document).ready(function() {
    $("input:radio").on("click", function() {
            makeFieldsActive($(this));
        }); 
});

function makeFieldsActive(elem) {

    $("input:text").prop("disabled", true);
     $("input.group" + elem.val()).prop("disabled", false);
}
4

1 回答 1

0

这里有两种可能性（至少）：

您可以清空对话框的内容并再次附加它，您可以确保默认情况下已设置所有内容。最简单的尝试是创建新的 html 页面，内容将是您的表单（不需要通常的 html 标签），并将其加载到您的 div 中。这与重新加载页面相同。但也要小心，当您重新加载页面时，某些浏览器倾向于保留表单数据，因此它可能不是您实际需要的解决方案：

$("#dialog-form").empty().load("form.html");

另一种方法是使用将所有输入重置为默认值的功能：

$("input").prop("disabled",false);

那么你会把这段代码放在哪里呢？我建议您在打开对话框时这样做，有一个专门用于此目的的事件，称为 dialogopen ：

$("#dialog-form").dialog(
{
    open: function(event,ui)
    {
        // reset form
    }
});

您也可以稍后使用以下命令进行设置：

$("#dialog-form").on("dialogopen",function(event,ui)
{
     // reset form
});

但是 .dialog() 小部件默认应该这样做，所以尝试添加

$("#dialog-form").dialog();`
于 2012-08-16T13:40:12.873 回答