2014-10-31 92 views
3

我使用的引導和bootbox插件,和我有這樣的代碼防止標籤內容顯示在引導程序3中?

這裏被鏈接到插件 http://bootboxjs.com/#download

我顯示的數據屬性NEX標籤,我需要的是當第二個用戶點擊顯示bootbox警報,並防止第二個選項卡顯示如果檢查按鈕不檢查?

HTML

<div class="tab-content"> 

    <div class="tab-pane fade in active" id="step-1"> 
     <p>First</p> 
     <p><input type="checkbox" name="user" value="user">I am not robot</p> 
    </div> 
    <div class="tab-pane fade" id="step-2"> 
     <p>Second</p> 
    </div> 

</div> 


<a class="pull-left" data-toggle="tab" href="#step-1">First</a> 
<a class="pull-right" data-toggle="tab" href="#step-2">Second</a> 

JS

$("a").click(function() { 

    bootbox.alert("Please check!", function() { 
     event.preventDefault(); 
    }); 

}); 

這裏正在撥弄 http://jsfiddle.net/08997uok/1/

我發現事件

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) { 
    bootbox.alert("Please check!", function() { 
     event.preventDefault(); 
    }); 
}) 

但問題是如何防止?

這裏有一些解決方案?

$('[data-toggle="tab"]').click(function(event) { 
    if(!$('[name="user"]').is(':checked') && $(event.target).attr('data-toggle') == 'tab'){ 
    event.preventDefault(); 
     bootbox.alert("Please check!", function() { 
    }); 
    return false; 
    } 
}); 

回答

4

我沒有得到你想要什麼,但如果你想檢查是否複選框以選擇第二個選項卡的時間檢查,如果它不檢查你不希望顯示第二標籤內容以及警報,您可以執行以下操作。

$('[data-toggle="tab"]').click(function(event) { 
    if(!$('[name="user"]').is(':checked') && $(event.target).attr('href') == '#step-2'){ 
    event.preventDefault(); 
    return false; 
    } 
    bootbox.alert("Hello world!", function() { 

    }); 

}); 
+0

是,但我想顯示警告如果不檢查,防止出第二個選項卡,但這裏#步驟2中是硬編碼的,如果我有什麼幾個標籤,每個標籤我有檢查? – 2014-10-31 07:12:11

+0

我已根據您的答案提出瞭解決方案,txanks – 2014-10-31 07:16:48