Question

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

这里是jQuery代码，它通过radiobuttons改变字段的活动：

$(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);
}

Answer 1

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

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

jquery单选按钮更改问题

1 个答案: