我正在使用FUBUMVC并使用自定义HTMLConvention生成以下htmltag:
<div class="CheckboxWithValues">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38">
<input type="hidden" name="Advertise" value="37">
</div>
通过jQuery我正在使用以下代码附加KendoUI移动银器:
$(document).ready(function () {
$('input[name$="_CheckboxWithValuesInput"]').each(function () {
var input = $(this);
var hiddenFieldName = input.attr("name").replace("_CheckboxWithValuesInput", "");
var hiddenField = $('input[name="' + hiddenFieldName + '"]');
var checked_value = input.attr('checked_value');
var unchecked_value = input.attr('unchecked_value');
//bind initial value
if (input.is(':checked'))
hiddenField.val(checked_value);
else
hiddenField.val(unchecked_value);
//setup kendo UI switch
var checked_text = input.attr('checked_text').toString();
var unchecked_text = input.attr('unchecked_text').toString();
var s = input.kendoMobileSwitch({ checked: input.is(':checked'), onLabel: checked_text, offLabel: unchecked_text }).data('kendoMobileSwitch');
//bind change event
s.bind('change', function (e) {
var checked = e.checked;
if (checked)
hiddenField.val(checked_value);
else
hiddenField.val(unchecked_value);
});
});
});
我正在让切换显示在页面上,但是当它似乎已经多次绑定到页面时。一次使用自定义的onLabel和offLabel,另一次使用默认的“ON”和“OFF”值。
以下是页面上的内容:
http://i.stack.imgur.com/sJzCm.jpg
其他人遇到过这个?
以下是将开关添加到控件后修改后的html的样子:
<div class="CheckboxWithValues">
<span class="km-switch km-switch-on">
<span class="km-switch km-switch-on" style="">
<input type="checkbox" checked="true" name="Advertise_CheckboxWithValuesInput" checked_text="Yes" checked_value="37" unchecked_text="No" unchecked_value="38" data-role="switch">
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -18px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translateX(62px); ">
<span class="km-switch-label-on">ON</span>
<span class="km-switch-label-off">OFF</span>
</span>
</span>
</span>
<span class="km-switch-wrapper"><span class="km-switch-background" style="margin-left: -15px; "></span></span>
<span class="km-switch-container">
<span class="km-switch-handle" style="-webkit-transform: translate(65px, 0px); ">
<span class="km-switch-label-on">Yes</span>
<span class="km-switch-label-off">No</span>
</span>
</span>
</span>
<input type="hidden" name="Advertise" value="37">
</div>
答案 0 :(得分:0)
由于某种原因,它初始化两次。你能检查两次调用$(document).ready()吗?您是否也开始使用Kendo移动应用程序?
@Ian:data('kendoMobileSwitch')包含他之后使用的Switch对象。