自定义单选按钮 - IE会杀了我

时间:2012-02-13 19:39:11

标签: javascript jquery radio-button

我正在使用jQuery来自定义一些单选按钮。我有两种不同的单选按钮样式,因此您将看到两个if语句查找这两个不同的类。

我遇到的问题是,该脚本在一切都可以完美地运行,但是Internet Explorer。遗憾的是,我工作的公司已经将IE8表示为所有网站的行业标准,因此所有的东西都可以与IE8一起使用。

我发给你的是我的代码

单选按钮1的HTML

<label class="label_radio-STD happy" for="happy3"><input id="happy3" name="q3" type="radio" value="YES"/></label>
<label class="label_radio-STD meh" for="meh3"><input id="meh3" name="q3" type="radio" value="INDIFFERENT"/></label>
<label class="label_radio-STD sad" for="sad3"><input id="sad3" name="q3" type="radio" value="NO"/></label>

单选按钮2的HTML

<label class="label_radio" for="radio0">0<input id="radio0" name="q5" type="radio" value="0"/></label>
<label class="label_radio" for="radio1">1<input id="radio1" name="q5" type="radio" value="1"/></label>
><label class="label_radio" for="radio2">2<input id="radio2" name="q5" type="radio" value="2"/></label>

运行整个shaz-bot的JQuery

<script>
    function setupLabel() {
        if ($('.label_check input').length) {

            $('.label_check').each(function(){
                $(this).removeClass('c_on');
            });

            $('.label_check input:checked').each(function(){
                $(this).parent('label').addClass('c_on');
            });                
        };

        if ($('.label_radio input').length) {

            $('.label_radio').each(function(){
                $(this).removeClass('r_on');
            });

            $('.label_radio input:checked').each(function(){
                $(this).parent('label').addClass('r_on');
            });
        };

        if ($('.label_radio-STD input').length) {

            $('.label_radio-STD').each(function(){
                $(this).removeClass('s_on');
            });

            $('.label_radio-STD input:checked').each(function(){ 
                $(this).parent('label').addClass('s_on');
            });
        };

    };
    $(document).ready(function(){
        $('label').click(function(){
            setupLabel();
        });
        setupLabel(); 
    });
</script>

我在每个IF语句上抛出警告,并且它们已经很好了,我已经在EACH循环上抛出了警告并且它们已经很好了。我曾经有一行jQuery“$('body')。addClass(”has-js“)”作为document.ready函数的第一行,但是html body从来没有一类has-js。我进一步查看了代码,并意识到我不需要它来运行我的代码。但令我困扰的是$('body')。addClass(“has-js”)从未奏效过。

可能就像我关闭IE8的javascript一样简单吗? 如果是这样的话,我可以强迫任何人关闭它吗?

2 个答案:

答案 0 :(得分:3)

以下是墨菲的破解代码。 http://jsfiddle.net/GRstu/10/

请注意小提琴input[type=radio]{display:none;}中的CSS行。该行将导致单击标签时未选中/取消选中单选按钮。这就是IE的工作原理。单击相应的标签时,您需要执行一种解决方法来检查隐藏的无线电。

您可以通过在点击事件中添加一行来完成此操作:

$('label').click(function() {
    $(this).children("input").prop("checked", true);  //This is the key
    setupLabel();
});

以下是解决方案的jsfiddle:http://jsfiddle.net/GRstu/11/

请注意,这是与此问题中提出的类似的解决方案和问题: Labels and hidden fields in Internet Explorer (and jquery)

答案 1 :(得分:1)

您可以在html中添加<noscript>标记,以便在关闭javascript的情况下向用户显示消息,但您无法在网页中为其启用此消息。

E.g。

<noscript> Enable javascript! </noscript>

但是,由于您处于公司环境中,因此系统管理员可以创建Group Policy以在所有用户的Internet Explorer设置中启用Javascript。