how to make jquery-ui.dialog revert a form on cancel

问题

The following javascript allows a radiobutton set to control the alternate visibility of 2 <fieldset>s. I added a function provwarning to intercept a click on the radiobuttons and determine if a change would lead to a record deletion. If that were possible, the function displays a warning message and either continues (on "Continue") or reverts the radiobutton set to the original setting on "Cancel". Unfortunately, the "Cancel" reversion is not happening. What am I doing wrong?

$(document).ready(function() {
    // initial visibility of provenance option fields
    $("input[name='provenance']").ready(function(){ 
        var v=$(this +":checked").val();
        if(v=='del'){
            $('#del').show();
            $('#cross').hide();
        } else if (v=='cross'){
            $('#cross').show();
            $('#del').hide();
        } else{
            $('#cross').hide();
            $('#del').hide();
        }
    });

    // toggle hide/show of provenance field
    $("input[name='provenance']").live("click", function(){
        v=$(this +":checked").val();
        provwarning(v); //intercept choice and check for conflicts
        v=$(this +":checked").val();//may have changed due to provwarning

        if(v=='del'){
            $('#del').show();
            $('#cross').hide();
        } else if (v=='cross'){
            $('#cross').show();
            $('#del').hide();
        } else{
            $('#cross').hide();
            $('#del').hide();
        }
    });

     //determine if user choice will clobber existing data
     //warn user
     //continue or revert user choice to previous value
    provwarning=function(changingto){
        c=$('input[name="cross_id"]').val();
        d=$('input[name="del_id"]').val();
        if(!(c||d))return; //prov_was is 'Unknown', so there is no conflict

        cw=(changingto=='unknown')? 'Unknown' : (changingto=='del') ? 'Delivered' : 'Bred Onsite';
        if(d){
            prov_was='del';
            msg="If you change the provenance to '"+cw+"' the current provenance, 'Delivered', will be deleted.";
        }else{
            prov_was='cross';
            msg="If you change the provenance to '"+cw+"' the current provenance, 'Bred Onsite', will be deleted.";
        }
        if(changingto==prov_was) return; //no change, so no worries

        m=modalpop(msg); //make a div to show the dialog
        $(m).dialog({
            resizable: false,
            height:140,
            modal: true,
            title: 'Conflict with current Provenance',
            buttons: {
                "Continue": function() {
                    $(this).dialog('close');
                },
                "Cancel": function() {
                    //not changing the form setting. WHY?
                    $("input[name='provenance']:checked").val(prov_was);                        $(this).dialog('close');
                }
            }
        });
    };
});

//create or empty a div with id='modalpop' for use as an alert box with jquery-ui.dialog()
function modalpop(msg){
    var m=$('#modalpop');
    if($(m).length==0){
        m='<div id="modalpop">'+msg+'</div>';
    }else{
        $(m).text(msg);
    }
    return m;
}

And the HTML:

<fieldset><legend>Provenance</legend>
    <fieldset class='col1'>
    <ul>
        <li><input type='radio' name='provenance' id='provenance0' value='unknown'  ><label for='provenance0' class='lilab'>Unknown</label></li>
        <li><input type='radio' name='provenance' id='provenance1' value='del'  ><label for='provenance1' class='lilab'>Delivered</label></li>
        <li><input type='radio' name='provenance' id='provenance2' value='cross' checked="checked" ><label for='provenance2' class='lilab'>Bred onsite</label></li>
    </ul>
    </fieldset>

    <fieldset class='optcol2' id='cross'>
        <div><label for='dam'>Dam</label><input name='dam_fish_name' id='dam' value='100730'/></div>
        <div><label for='dam_count'>Dam Count</label><input name='dam_count' id='dam_count' value='6'/></div>
        <div><label for='sire'>Sire</label><input name='sire_fish_name' id='sire' value='100715'/></div>
        <div><label for='sire_count'>Sire Count</label><input name='sire_count' id='sire_count' value='6'/></div>
        <div><label for='cross_date'>Cross Date</label><input name='cross_date' id='cross_date' value='2011-02-08'/></div>
        <div><label for='crossnotes'>Notes</label><textarea name='cross_notes' id='crossnotes'></textarea></div>
        <input name='cross_id' type="hidden" value="39" />
    </fieldset>

    <fieldset class='optcol2' id='del'>
        <div><label for='del_date'>Delivery Date</label><input name='delivery_date' id='del_date' type='text' value=''></div>
        <div><label for='del_count'>Delivery Count</label><input name='delivery_count' id='del_count' class='valcount' type='text' value='0'></div>
        <div><label for='supplier'>Supplier</label><select name='supplier_id' id='supp_name'>
            <option value='1' >ZIRC</option>
        </select></div>
        <div><label for='delnotes'>Notes</label><textarea name='delivery_notes' id='delnotes'></textarea></div>
        <input name='del_id' type="hidden" value="" />
    </fieldset>
</fieldset>

回答1:

Check out the working jsFiddle demo that changes your "Cancel" button to this:

"Cancel" : function() {

    var $radio = $('input[name="provenance"]');

    $radio
        .removeAttr("checked")
        .filter('[value="' + prov_was + '"]')
        .prop("checked", true)
        .click();

    $(this).dialog('close');

}

回答2:

This is what I came up with, bit slower than Scott, but same idea...

Your only real error was how you were going about setting the checked value on your radio button:

$("input[name='provenance']:checked").val(prov_was);  

Should be more like this:

$("input[name='prov'][value='"+prov_was+"']").attr('checked','checked');

Working demo here: http://jsfiddle.net/ryleyb/Zh5ma/

来源：https://stackoverflow.com/questions/6032410/how-to-make-jquery-ui-dialog-revert-a-form-on-cancel