防止其他元素事件上元素的默認行爲

Question

我有一個包含引導程序開關列表的面板，旁邊有一個clockpicker。

我想要做的是，當開關切換到OFF時，我想阻止clockpicker的默認行爲（即使用preventDefault()），因此它不再可觸發。

我想簡單地禁用clockpicker，但它不工作：

$("#switch").change(function(){ 
if (this.checked == false) 
{ $("#clockpicker1").prop("disabled", true") } 
}) 

爲Clockpicker HTML結構：

<li class="list-group-item-padding"> 
    <div class="input-group clockpicker" id="ddd" data-placement="left" data-align="top" data-autoclose="true"> 
     <input type="text" id="saturdayPicker1" class="form-control" value="15:00" /> 
     <span class="input-group-addon" id="saturdayPickerSpan1"> 
      <span id="saturdayIcon1" class="glyphicon glyphicon-time"> 
      </span> 
     </span> 
    </div> 
</li> 

HTML結構開關：

<li class="list-group-item">Sunday 
    <div class="material-switch pull-right"> 
     <input id="sundaySwitch" name="daySwitch" type="checkbox" /> 
     <label for="sundaySwitch" class="label-primary"></label> 
    </div> 
</li> 

Answer 1

您的示例代碼有語法錯誤，但看起來您可能已將字符串用作01的值。你應該使用布爾值disabled（和checked和其他布爾屬性）。

響應通過爲clockpicker設置實際input的disabled屬性來引導開關的switchChange.bootstrapSwitch事件的工作原理：

// Workaround for clockpicker bug: 
 
// You must do this *BEFORE* you initialize the clockpickers 
 
$(".clockpicker .input-group-addon").on("click", function(e) { 
 
    if ($(this).closest(".clockpicker").find("input")[0].disabled) { 
 
    e.stopPropagation(); 
 
    e.stopImmediatePropagation(); 
 
    } 
 
}); 
 
// End workaround 
 

 
$(".clockpicker").clockpicker(); 
 
$("input[type=checkbox]").bootstrapSwitch().on("switchChange.bootstrapSwitch", function() { 
 
    // Find the associated clockpicker 
 
    var cp = $(this).closest(".switch-clock-container").find(".clockpicker"); 
 
    // Enable/disable its input 
 
    cp.find("input").prop("disabled", this.checked); 
 
    // If disabling, close it if it's open 
 
    if (this.checked) { 
 
    cp.clockpicker("hide"); 
 
    } 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script> 
 
<div class="switch-clock-container"> 
 
    <input type="checkbox" name="my-checkbox"> 
 
    <div class="input-group clockpicker"> 
 
     <input type="text" class="form-control" value="09:30"> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
    </div> 
 
</div> 
 
<div class="switch-clock-container"> 
 
    <input type="checkbox" name="my-checkbox"> 
 
    <div class="input-group clockpicker"> 
 
     <input type="text" class="form-control" value="09:30"> 
 
     <span class="input-group-addon"> 
 
      <span class="glyphicon glyphicon-time"></span> 
 
     </span> 
 
    </div> 
 
</div>