テキストボックスからタイムピッカー効果を削除してください

Question

私はすでにこの問題を尋ねた前の質問を見てきました。しかし、 私は同じidでテキストボックスを置き換えたくありません。 Timepickerがドロップダウンtimepickerで選択され

（期待通りに実行される）テキストボックスに有効にする必要があり

テキストボックスのドロップダウン値の変更は、その後、テキストボックスは、単純なテキストとして

を扱わなければならない場合

function ChangeType(control){ 
 
    \t if(control.value == "Time"){ 
 
     \t $("#txtInput").timepicker(); 
 
     } 
 
     else { 
 
     $("#txtInput").val(''); 
 
     \t // I want to remove timepicker from textbox 
 
     } 
 
     
 
    }

.input-group-addon:after{ 
 
     content:'\0777' 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<select name="" id="cmbList" onchange="ChangeType(this)"> 
 
     <option value="Text">Textbox</option> 
 
     <option value="Time">Timepicker</option> 
 
    </select> 
 
    <br><br><br> 
 
    <div class="input-group bootstrap-timepicker timepicker"> 
 
     <input id="txtInput" type="text" class="form-control"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
 
    </div>

Live Demo

Answer 1

I have already seen the previous question asked for this problem. But i don't want to replace the textbox with same id.

。元の要素を置き換えたくない場合は、プラグインが作成するすべてのイベントハンドラと新しい要素を削除してみることができます。

これは完璧な解決策ではなく、小さなハックです。私がやっているのは、timepickerに組み込まれている関数を初期化解除するための組み込み関数がないからです。実際の要素（プラグインが初期化されています）を削除し、その要素のコピーを作成していますそれは新しい要素と一緒です。

function ChangeType(control){ 
 
    \t if(control.value == "Time"){ 
 
     /* getting outer html of the input and its next element (button which brings up the timepicker) */ 
 
     var elem = $("#txtInput").get(0).outerHTML; 
 
     var elem_next = $("#txtInput").next().get(0).outerHTML; 
 

 
     /* adding temporary class to identify original input */ 
 
     $("#txtInput").addClass('remove-this-now'); 
 

 
     /* removing the button next to the input */ 
 
     $('.remove-this-now').next().remove(); 
 
     $('.remove-this-now').after(elem + elem_next); 
 

 
     /* removing the input */ 
 
     $('.remove-this-now').remove(); 
 

 
     /* initializing timepicker to new input */ 
 
     \t $("#txtInput").timepicker(); 
 
     } 
 
     else { 
 
     $("#txtInput").val(''); 
 

 
     /* getting outer html of the input and its next element (button which brings up the timepicker) */ 
 
     var elem = $("#txtInput").get(0).outerHTML; 
 
     var elem_next = $("#txtInput").next().get(0).outerHTML; 
 

 
     /* adding temporary class to identify original input */ 
 
     $("#txtInput").addClass('remove-this-now'); 
 

 
     /* removing the button next to the input */ 
 
     $('.remove-this-now').next().remove(); 
 
     $('.remove-this-now').after(elem + elem_next); 
 

 
     /* removing the input */ 
 
     $('.remove-this-now').remove(); 
 
     } 
 
     
 
    }

.input-group-addon:after{ 
 
     content:'\0777' 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<select name="" id="cmbList" onchange="ChangeType(this)"> 
 
     <option value="Text">Textbox</option> 
 
     <option value="Time">Timepicker</option> 
 
    </select> 
 
    <br><br><br> 
 
    <div class="input-group bootstrap-timepicker timepicker"> 
 
     <input id="txtInput" type="text" class="form-control"> 
 
     <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span> 
 
    </div>

Answer 2

プラグインがそうする手段を提供しているのは本当に可能です。よく書かれたものは、通常、破壊と呼ばれる「方法」を提供することによって行うべきです。例えば、jQueryのUIで、あなたはこのような要素から日付ピッカーを削除することができます。

$("selector").datepicker("destroy"); 

プラグインは、それを行うための手段を提供していない場合、それは少しトリッキー取得します。イベントとデータを複製せずに要素を複製し、元のものを複製と置き換えることはできますが、それはすべての場合に効果的とは言えず、実際には何よりもハックの回避策です。プラグインはこれを実行するために、任意の組み込み関数が付属していない場合に使用できるいくつかの回避策の中だ

Answer 3

代わりに、ブートストラップ・timepicker.jsのjqueryの-timepickerを使用してください：$('#txtInput').timepicker('hide');