Javascript jquery单选按钮更改问题

我有2个单选按钮，我通过单选按钮使一些字段处于活动/非活动状态。但是，当我通过ajax从表单发送数据，然后在不重新加载页面的情况下第二次打开表单时，单选按钮被破坏，即它们不提供活动/非活动功能。 例如，当我单击按钮2时，字段3变为活动状态，我放入所需数据并通过ajax将其发送到服务器，但当我第二次打开对话框时，radiobutton 2仍处于活动状态，当我尝试将ot更改为radiobutton 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>

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

您可以清空对话框的内容并再次附加它，您可以确保所有内容都是默认设置的。最容易尝试的方法是创建新的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();`

$("#dialog-form").dialog();`