0

こんにちは私はjqueryに3つのタブがあります、

以下の2つのフィールドが選択されている場合、2番目と3番目のタブを無効にしたいのですが、最初のタブにある[いいえ]オプションを選択します。

<!--    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>

どうもありがとう

4

1 に答える 1

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");
    }
});

ここで行うことは、回答を選択するたびに、両方の回答がNOに設定されているかどうかを確認することです。その場合、最初のタブを除くすべてのタブに追加し、クラスを無効にします。

次に、このコードを追加してタブを「ブロック」します。

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

それらをクリックしても何も起こらないようにします。

これがデモです

于 2013-02-05T12:11:47.403 に答える