重新整理和表單元素自動初始化

在本章，我們將學習如何重新整理表單元素和阻止表單元素自動初始化。

重新整理表單元素

重新整理方法用於由表單控制元件本身更新新的狀態，並使用 JavaScript 更新表單控制元件。以下程式碼片段用於不同的表單元素 −

複選框

$( "input[type = 'checkbox']" ).prop( "checked", true ).checkboxradio( "refresh" );

單選按鈕

$( "input[type = 'radio']" ).prop( "checked", true ).checkboxradio( "refresh" );

下拉列表

var myselect  =  $( "#selectfoo" );
myselect[0].selectedIndex = 3;
myselect.selectmenu( "refresh" );

滑塊

$( "input[type = 'range']" ).val( 60 ).slider( "refresh" );

翻轉開關

var myswitch = $( "#selectbar" );
myswitch[ 0 ].selectedIndex = 1;
myswitch.slider( "refresh" );

阻止表單元素自動初始化

包含屬性 data-role = "none" 來修改用於阻止自動初始化的選擇器。將 data-role = "none" 屬性與 mobileinit 事件繫結，以載入第一頁以及後續頁面。

<label for = "test">
<select id = "test" name = "test" data-role = "none">
   <option value = "Mumbai">Mumbai</option>
   <option value = "Pune">Pune</option>
   <option value = "Belgaum">Belgaum</option>
   <option value = "Chennai">Chennai</option>
   <option value = "Bangalore">Bangalore</option>
</select>

$( document ).bind( "mobileinit", function() {
   $.mobile.page.prototype.options.keepNative = "select, input.test, textarea.bar";
});