jQuery不适用于IE 6和7上的表的CSS规则

Question

I have a form with 2 radio buttons and when a user clicks on one of the radio buttons a select input appears.
It works on Chrome, FF and IE 8+ but it doesn't work with IE 6 and 7.

Here is what I've done :

HTML

<input type="radio" name="Equipier" value="oui" id="oui">Oui
<input type="radio" name="Equipier" value="non" id="non">Non

<select name="choixequipier" id="selectequipier">
    <option value="non">-</option>
    <option value="matin">Matin</option>
    <option value="apres midi">Arpès-midi</option>
    <option value="nuit">Nuit</option>
    <option value="week end">Week-end</option>
</select>

JS

$(document).ready(function () {
    $("input[name=Equipier]:radio").change(function () {
        if ($("#oui").attr("checked")) {
            $('#equipierchoix').css("display", "table-row");
        }
        else {
            $('#equipierchoix').css("display", "none");
            $('#selectequipier option[value="non"]').attr("selected", "selected");
        }
    })
});

I'm using jQuery 1.7.1

How can I solve the problem for IE 6 and 7 ?

EDIT

I'm able to enter in the if statement so it's a problem with this line :

$('#equipierchoix').css("display", "table-row");

Answer 1

Well, Internet Explorer has this thing called conditional tags in older versions

This is all IE code of IE 8 and above

<!--[if (gt IE 8)|!(IE)]><!-->
<script type="text/javascript">
$(document).ready(function () {
    $("input[name=Equipier]:radio").change(function () {
        if ($("#oui").attr("checked")) {
            $('#equipierchoix').css("display", "table-row");
        }
        else {
            $('#equipierchoix').css("display", "none");
            $('#selectequipier option[value="non"]').attr("selected", "selected");
        }
    })
});
</script>
<!--<![endif]-->

Here you put any work arounds for anything obsolete and lesser than IE 8(lt = lesser than)

<!--[if lt IE 8]>
<script type="text/javascript">
$(document).ready(function () {
    $("input[name=Equipier]:radio").change(function () {
        if ($("#oui").attr("checked")) {
            $('#equipierchoix').css("display", "block");
        }
        else {
            $('#equipierchoix').css("display", "none");
            $('#selectequipier option[value="non"]').attr("selected", "selected");
        }
    })
});
</script>
<![endif]-->

I think that display:block should work, but I don't have a proper version of IE at hand to test.

And otherwise you can play with $('#equipierchoix').css("visibility", "hidden"); and $('#equipierchoix').css("visibility", "visible"); if the display:block fails for IE 6 & 7 code

EDIT FOR CLARIFICATION

You need to put both blocks on the page.
In the first block you place all the code that should only run for "recent" browsers

in the second block you place all the code that is going to have to work or adapted for functionality for ie6-7

code that works for anything doesn't have to be encased by the conditional comments.

Answer 2

Internet Explorer supports display: table-row only since version 8.0.

Solve the problem by dropping support for dead browsers, or by using an actual table.

Answer 3

To obtain "checked", you should use 'prop' not 'attr':

$("#oui").prop("checked")

Also '#equipierchoix' doesn't seem to be the right ID, it would appear to be:

$('#selectequipier').css("display", "none");

Check caniuse.com to check what else is valid for those very old browsers, although I see that that site is starting to phase them out.

A sample plunk is here:

Plunkr