Question

以下javascript允许使用单选按钮设置来控制2 <fieldset>的备用可见性。我添加了一个函数provwarning来截取单击radiobuttons并确定更改是否会导致记录删除。如果可能，该功能将显示一条警告消息，并继续（在“继续”上）或将单选按钮恢复为“取消”上的原始设置。不幸的是，“取消”回归没有发生。我究竟做错了什么？

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

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>

Answer 1

查看 working jsFiddle demo ，将“取消”按钮更改为：

"Cancel" : function() {

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

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

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

}

Answer 2

这就是我提出的，比斯科特慢一点，但同样的想法......

您唯一真正的错误是如何在单选按钮上设置选中的值：

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

应该更像这样：

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

此处的演示演示：http://jsfiddle.net/ryleyb/Zh5ma/

如何使jquery-ui.dialog在取消时恢复表单

2 个答案: