jQuery单选按钮更改问题

Question

I have 2 radiobuttons and I make some fields active/inactive via radiobuttons. but when I send the data from the form via ajax and then open my form for the second time without reloading the page, the radio buttons are broken, ie they don't provide active/inactive functionality. So, for instance, when I click button 2, field3 becomes active, i put needed data and send it to server via ajax, but when I open my dialog for the second time, radiobutton 2 is still active and when I try to change ot to radiobutton 1 fields 1,2 are still inactive, but when I reload the page, everything is ok. what's the matter? here is my html code:

<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>

and here is jQuery code, that changes activity of fields via 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

Two possibilities here (at least) :

You could empty the content of your dialog and append it again, you would be sure everything is set by default. The easiest to try it out is to create new html page which content would be your form (no need for the usual html tags), and load it into your div. It would be the same as reloading your page. But also be careful, some browsers tend to keep the forms data when you reload a page so it might not be the solution you actually need :

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

Other way is to use a function that will reset all your inputs to default :

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

So where would you put this code? I'd suggest to do it when you open your dialog, there is an event especially for that purpose called dialogopen :

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

You can also set it up later with :

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

But .dialog() widget should do it by default , so try to add

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