根据字段选项Jquery禁用选项卡

时间:2013-02-05 11:34:08

标签: jquery tabs

嗨我在jquery中有三个标签,

我想要禁用第二个和第三个标签,如果选择以下两个字段,则选择第一个选项卡上的“否”选项。

<!--    Chest compressions performed    -->
<tr id="ContainerQ110I1039">
    <td>Chest compressions performed&nbsp;</td>
    <td><select name="Q110I1039" id="Q110I1039">
            <option value=""  ></option>
            <option value="0"  >No</option>
            <option value="1"  >Yes</option>
        </select>
    </td>
 </tr>
<!--    Defibrillation delivered    -->
<tr id="ContainerQ111I1040">
    <td>Defibrillation delivered&nbsp;</td>
    <td><select name="Q111I1040" id="Q111I1040" >
            <option value=""  ></option>
            <option value="0"  >No</option>
            <option value="1"  >Yes</option>
        </select>
    </td>
 </tr>

以下是标签

<ul class='tabs'>
 <li><a href='#tab1'>2222 calls</a></li>
 <li><a href='#tab2'>Cardiac Arrest</a></li>
 <li><a href='#tab3'>Outcome </a></li>
</ul>

以下是到目前为止的jquery

<script language="javascript">
        // Wait until the DOM has loaded before querying the document
        $(document).ready(function(){
            $('ul.tabs').each(function(){
                // For each set of tabs, we want to keep track of
                // which tab is active and it's associated content
                var $active, $content, $links = $(this).find('a');

                // If the location.hash matches one of the links, use that as the active tab.
                // If no match is found, use the first link as the initial active tab.
                $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);

                $active.addClass('active');
                $content = $($active.attr('href'));

                // Hide the remaining content
                $links.not($active).each(function () {
                    $($(this).attr('href')).hide();
                });

                // Bind the click event handler
                $(this).on('click', 'a', function(e){
                    // Make the old tab inactive.
                    $active.removeClass('active');
                    $content.hide();

                    // Update the variables with the new link and content
                    $active = $(this);
                    $content = $($(this).attr('href'));

                    // Make the tab active.
                    $active.addClass('active');
                    $content.show();

                    // Prevent the anchor's default click action
                    e.preventDefault();
                });


            });
        });
    </script>

非常感谢

1 个答案:

答案 0 :(得分:1)

使用jQuery你可以实现这样的东西:

$("select").change(function () {
    if ($("#Q110I1039").find(":selected").text() == "No" && $("#Q111I1040").find(":selected").text() == "No") {
        $(".tabs li").not(":first-child").find("a").addClass("disabled");
    }
});

我们在这里做的是每次选择答案时,我们都会检查两个答案是否都设置为。如果是这种情况,我们会添加到所有标签中,除第一个标签外,课程已停用

然后我们添加此代码以“阻止”标签:

$(document).on("click", ".disabled", function () {
    return false;
});

所以,如果你点击它们没有任何反应。

这是DEMO