bootstrap-datepicker雙插件和stopPropagation

我使用bootstrap-datepicker並希望有一個複選框的第二個插件。我不想觸發datepicker的顯示，當我點擊複選框插件。我測試了stopPropagation，在第二插件的onclick事件返回false，但它不與這個JavaScript工作:(bootstrap-datepicker雙插件和stopPropagation

<div class="container"> 
<div class ="form-group"> 
<label class="col-sm-2 control-label" >Received Date</label>   
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT"> 
    <input class="text-input form-control" type="text" name="ARDT" maxlength="10" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>           
    <span class="input-group-addon test"><input type="checkbox"/></span> 
</div> 
</div> 
</div>

：

$(document).ready(function() { 
    $('#ARDT').datepicker();  
$('.date .test').click(function(e){ 
    e.stopPropagation(); 
    }); 
});

可以現場觀看本的jsfiddle： http://jsfiddle.net/5a5xzz10/4/

你能幫助我嗎？

感謝 Whiletrue

編輯：找到一個解決方案：

<div class ="form-group"> 
<label class="control-label" >Received Date OK</label>  
<div class="input-group"> 
    <div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2"> 
    <input class="text-input form-control" type="text" name="ARDT" maxlength="10" /> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>           
    </div> 
    <span class="input-group-addon"><input type="checkbox"/></span> 
</div> 
</div>

embbed輸入組內另一日期選擇器，並把第二輸入組附加剛過

喜歡這裏：http://jsfiddle.net/5a5xzz10/6

來源

2016-11-14 Whiletrue

我有一個答案，但它似乎不是很優雅。

我在添加日期選擇器後添加了複選框。

$(document).ready(function() { 
    $('#ARDT').datepicker(); 
    $("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>')); 
});

來源

2016-11-14 14:55:31 Fefux

此解決方案doen't工作，導致設置日期選擇器組件中的所有輸入值包括複選框...我發現另一個解決方法，嵌入輸入組內的另一個喜歡這裏：HTTP：//的jsfiddle達網絡/ 5a5xzz10/6 / – Whiletrue

bootstrap-datepicker雙插件和stopPropagation

回答

相關問題