javascript - 从文本框中删除时间选择器效果

Question

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

当在下拉列表中选择 Timepicker 时，timepicker 应在文本框中启用(按预期运行)

当下拉值更改为文本框时，文本框应视为简单文本

    function ChangeType(control){
    	if(control.value == "Time"){
      	$("#txtInput").timepicker();
      }
      else {
        $("#txtInput").val('');
      	// 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

我已经看到了针对此问题提出的上一个问题。但我不想用相同的 id 替换文本框。

如果插件没有任何内置函数来执行此操作，这是您可以使用的几种可能的解决方法之一。如果您不想替换原始元素，可以尝试删除插件创建的所有事件处理程序和新元素。

这不是一个完美的解决方案，而是一个小技巧。我正在做的是，由于时间选择器没有任何内置函数来取消初始化它，所以我正在制作该元素的副本，删除实际元素(已初始化插件)，然后替换它与新元素。

    function ChangeType(control){
    	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 */
      	$("#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>