他の要素のイベントにある要素のデフォルトの動作を防止する

Question

私はブートストラップスイッチのリストを含むパネルを持っていますが、それぞれには時計ピッカーがあります。

私がしたいことは、スイッチがOFFに変更されたとき、clockpickerのデフォルト動作（つまりを使用しないようにする）がトリガー可能でないようにしたいのです。 Clockpickerため

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

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> 

：

<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構造をスイッチするために、私は単にclockpickerを無効にしようとしたんだけど、それがすべてで働いていない

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>