Question

我有一个剑道开关按钮，如下所示：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<p>Main Date: <input type="text" id="datepicker"></p>


<p>Date1: <input type="text" class="datepicker-to-fill" data-days="1" id="datepicker1"></p> 
<p>Date2: <input type="text" class="datepicker-to-fill" data-days="2" id="datepicker2"></p> 
<p>Date3: <input type="text" class="datepicker-to-fill" data-days="3" id="datepicker3"></p> 
<p>Date4: <input type="text" class="datepicker-to-fill" data-days="4" id="datepicker4"></p> 
<p>Date5: <input type="text" class="datepicker-to-fill" data-days="5" id="datepicker5"></p> 
<p>Date6: <input type="text" class="datepicker-to-fill" data-days="6" id="datepicker6"></p> 
<p>Date7: <input type="text" class="datepicker-to-fill" data-days="7" id="datepicker7"></p> 
<p>Date8: <input type="text" class="datepicker-to-fill" data-days="8" id="datepicker8"></p> 
<p>Date9: <input type="text" class="datepicker-to-fill" data-days="9" id="datepicker9"></p> 
<p>Date10: <input type="text" class="datepicker-to-fill" data-days="10" id="datepicker10"></p> 
<p>Date11: <input type="text" class="datepicker-to-fill" data-days="11" id="datepicker11"></p> 
<p>Date12: <input type="text" class="datepicker-to-fill" data-days="12" id="datepicker12"></p> 
<p>Date13: <input type="text" class="datepicker-to-fill" data-days="13" id="datepicker13"></p> 
<p>Date14: <input type="text" class="datepicker-to-fill" data-days="14" id="datepicker14"></p>

这是jquery：

<div class="col-md-2 form-group">
    <input id="euro-switch" aria-label="euro Switch" />
</div>

我有一个数字文本框：

$("#euro-switch").kendoMobileSwitch({
    onLabel: "€",
    offLabel: "%",
    change: function (e) {
        $('kendoNumericTextBox').value                    
    }
});

现在我想在欧元和百分比之间切换，以便您在数字文本框中看到欧元符号（€）或％符号。

我该怎么做？

谢谢

OKE，我现在就这样：

<div class="col-md-2 form-group">
        @(Html.Kendo().NumericTextBox()
            .Name("SignalThreshold")
            .Value(0)
            .Step(10)
            .Min(0)
            .Events(e => e.Change("FilterThresholdChange"))
            .Format("'€' ##.00")
        )
</div>

这是我的剑道数字文本框：

 $("#euro-switch").kendoMobileSwitch({


            onLabel: "€",
            offLabel: "%",
            change: function (e) {

                var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();
                var inpbox = $('#SignalThreshold').data("kendoNumericTextBox");
                console.log(inpbox)
                inpbox.setOptions(
                    {
                        format: "\\" + label + "\\ #",
                        decimals: 3
                    });
                inpbox.value(inpbox.value());
            }

        });


        $("#SignalThreshold").kendoNumericTextBox({
            format: "\\%\\ #",
            decimals: 3,
            value: 1

        });

但这不起作用。

Answer 1

Paritosh的例子并不完全正常。所以我就是这样做的。

 $("#euro-switch").kendoMobileSwitch({
     onLabel: "€",
     offLabel: "%",
     change: function(e) {

         var label = e.sender.value() ? e.sender.options.onLabel : e.sender.options.offLabel.toString();

         var inpbox = $('#currency').data("kendoNumericTextBox");

         inpbox.setOptions({
             format: "\\" + label + "\\ #",
             decimals: 3
         });

         inpbox.value(inpbox.value());
     }

 });


 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

它的作用是：转义％，因此数字文本框不执行算术运算。将值设置为自身的原因是强制kendo使用新过滤器更新数字文本框（没有开箱即用的功能。）。

请参阅我的简单Dojo以获取功能示例。

编辑：

因为您使用MVC生成数字文本框，所以需要从脚本中删除以下代码：

 $("#currency").kendoNumericTextBox({
     format: "\\%\\ #",
     decimals: 3
 });

还必须更改以下行：

var inpbox = $('#currency').data("kendoNumericTextBox");

ID必须与小部件的MVC名称匹配。

Answer 2

我们了解到您正在更新kendoNumericTextBox的格式问题。

您可以使用以下命令

更新它

$("#abc").data('kendoNumericTextBox').setOptions({format : '__', decimals: __ });

看看我已创建的 dojo 。

    $("#mail-switch").kendoMobileSwitch({
        onLabel: "%",
        offLabel: "€",
        change: changed
    });
    $("#abc").kendoNumericTextBox({
      format: "€ ##"
    });

  function changed(e){
    var control = $("#abc").data('kendoNumericTextBox');
    if(e.checked) control.setOptions({format : '##.## %', decimals: 2 });
    else control.setOptions({format : '$ ##', decimals: 0 });
    console.log(control.options.format);
  }

更多参考：Change format and decimals at runtime

PS：这不是您的方案的最终解决方案，但希望您从这个

获得一些帮助

asp.net mvc中的kendo开关按钮

2 个答案: