Question

在IE10上测试时遇到问题，它可以在包括IE Edge在内的所有其他浏览器上正常工作。

我有三个无线电输入，让用户可以选择他们需要的正确尺寸，我已经这样做了，因此输入不可见，并且顶部有一个可点击的图像，用于选择无线电输入。点击有效然而它没有检查选项，除非你点击左上角，有没有办法让它在IE10中工作？正如我所说，它适用于所有其他浏览器。

HTML

<input type="radio" name="size" id="ss" value="1" class="size"/><label for="ss"><img src="media/product-icons/icon-1.png" alt="Small" /></label>
<input type="radio" name="size" id="sm" value="2" class="size"/><label for="sm"><img src="media/product-icons/icon-2.png" alt="Medium" /></label>
<input type="radio" name="size" id="sc" value="3" class="size"/><label for="sc"><img src="media/product-icons/icon-3.png" alt="Custom" /></label>

的Javascript

<script type="text/javascript">//<![CDATA[
    $(window).load(function(){
        $('#size input:radio').addClass('input_hidden');
        $('#size label').click(function() {
           $(this).addClass('selected').siblings().removeClass('selected');

        });
    });//]]> 
</script>

当输入被选中时，它还会触发一个jquery请求来计算成本，所以如果你没有点击IE10的左上角但是在其他浏览器上没有问题，这不会触发。就像单选按钮的尺寸只有10x10像素。调用的jquery在

之下

$(function() {
$(".size, .print, .finish, .delivery").click(function() {
//$(document).on("change","#frmProduct", function() {
    var prodID = $(".productid").val();
    var size = $(".size:checked").val();
    var print = $(".print:checked").val();
    var delivery = $(".delivery:checked").val();
    var finish = [];
    //var finish = $(".finish:checked").val();
    $(".finish:checked").each(function(){
        finish.push($(this).val());
    });
    var qty = $(".qty").val();
    var unit = $(".measurement:checked").val();

    if(unit=='cm'){
        width = $(".inputCmWidth").val();
        height = $(".inputCmHeight").val();
    } else {
        width = $(".inputFtWidth").val();
        height = $(".inputFtHeight").val();
        width2 = $(".inputInWidth").val();
        height2 = $(".inputInHeight").val();

        width=(width*12)+parseFloat(width2);
        height=(height*12)+parseFloat(height2);
    }
    //alert(width +' '+height);
    //$("input:checkbox[name=finish]:checked").each(function(){
    //  finish.push($(this).val());
    //});


    //var size = $("[name='size']").val();
    //var print = $("[name='print']").val();

    var dataString = 'size='+ size +'&print='+ print +'&finish='+ finish +'&qty='+ qty +'&delivery='+ delivery +'&prod='+ prodID +'&width='+ width +'&height='+ height +'&unit='+ unit;

    $.ajax({
        type: "POST",
        url: "../../../inc/calculate.php",
        data: dataString,
        cache: false,
        success: function(html){
            $("#totalPrice").html(html);
        }
    });

    //return false;
});
});

隐藏单选按钮的类

.input_hidden {
position: absolute;
visibility: hidden;
}

这是一个粗略的jsfiddle，它显示了如果你在chrome和IE10中看到它会发生什么 https://jsfiddle.net/1uykeugr

提前感谢您对此的帮助

隐藏输入单选按钮在IE10中不起作用

0 个答案: