首页 > 解决方案 > 恢复 Firefox 选项卡后防止切换 type="radio" 元素

问题描述

我有两个 < input > 元素 type="radio"。默认选中其中之一。在 Firefox 浏览器中,当我检查另一个不是默认的 < input > 元素时,当我关闭选项卡并恢复该选项卡时,我发现“不是默认” < input > 元素已被选中!(在 Chrome 中它没有发生。)这不行,因为价格来自另一个选项,而图片属于另一个选项。

$(window).load(function(){
        $('input').prop('checked', true); 
    }; 

我试图将此添加到“重新加载”检查元素,但是如果在页面加载时更改它,则此“脚本”强制在页面加载后检查元素...

这是页面代码:

            <div class="radio">

            <input class="not4kt" autocomplete="off" name="option[23]"
    value="52" id="option-value-52" data-price_prefix="-"
    data-price="205.0000" onchange="recalculateprice('117_cp');"
 onclick="chimg('117', '33')" type="radio">

            <label for="option-value-52"></label>
            <label for="option-value-52">
            <span>33 см</span>                                  
            </label>

            </div>

        <div class="radio">

            <input class="rst4kt" autocomplete="off" checked="checked" name="option[23]" value="51"
    id="option-value-51" data-price_prefix="+" data-price="0.0000"
    onchange="recalculateprice('117_cp');"
onclick="chimg('117', '44')" type="radio">


            <label for="option-value-51"></label>
            <label for="option-value-51">
            <span>44 см</span></label>

            </div>

我怎样才能得到两者?--> (1) 保持元素选中默认为在恢复Firefox标签后选中;(2) 如果在页面加载时单击了另一个元素,则在页面加载后防止切换到“默认检查”元素。

更新! 实际上我在 < input > 中有大约 20 个动态更改的 ID ...所以我不能使用 #optionval-a ... 因为它总是可能是 #optionval-b 或 #optionval-foo-bar 甚至是 #optionval- 123...调用元素的唯一可能方法是:$('input')-这就是问题所在...

标签: javascriptjquery

解决方案


现在确定你的第一个要求是什么意思 - 你的意思是重新加载页面吗?如果是这样,您应该期望浏览器加载页面并检查默认元素。

如果用户在页面完成加载之前检查了一个按钮,为了防止复选框被设置为默认值 - 即在$(window).load(...)调用函数之前,您可以将该函数设置为检查单选元素的状态,尽管我认为您会需要重写该函数,因为目前它将通过勾选每个框直到找到最后一个“输入”元素,因为上面代码中的 jQuery 选择器input设置:input为用户在加载页面之前选择一个框而不使用 onload 功能重新设置选择,您可以检查是否未选中所有其他框以确保可以选中默认框:

$(window).load(function(){
     if (!$('#optionval-a').is(':checked' && !$('#option-value-b').is(':checked' && !$('#option-value-c').is(':checked'){
          $("#option-value-51").prop("checked", true);
     } 
}

这个答案也可能会有所帮助。

如果您的意思是 Firefox 似乎正在缓存用户的输入,如果他们在使用 Ctrl + Shift + t 关闭后立即重新加载页面,那么我认为他们会故意这样做以帮助他们认为希望准确打开最后一个选项卡的用户就像他们离开它一样。对于这种情况,我能想到的唯一解决方案是使用 setTimeout() 或等效的 jQuery 函数的脚本,您可以在页面加载时设置它,因为我怀疑 Firefox 会在页面加载时覆盖任何此类行为。因此:

$(window).load(function(){
       // possibly set radio boxes here...
       // ...or better still do everything inside the timeout function, thereby solving both problems at once:
       setTimeout(function(){ alert("I really want my page to do this"); }, 3000); 
}

一种替代方法可能是在页面完成加载之前不完全显示表单。或者,您可以先在列表中插入一个隐藏的输入单选元素(其名称是静态的,例如 name="hiddenCheckedRadioElement" ),并带有“checked”,然后在页面加载后检查它是否仍然处于选中状态。如果是这样,请检查您选择的字段。如果未选中,则意味着用户选择了其他内容,因此您不会选中默认框。


推荐阅读