浅析easyui中的readonly和h5中的readonly

在使用easyui的过程中，有时会将input框的readonly属性和easyui的readonly属性混用，然后动态修改这一状态，但在easyui中如果使用h5的readonly属性，使用removeProp("readonly");方法后，虽然input框可以编辑，但value却获取不到最新编辑后的值。

代码如下：
 

<div>
    <input type="text" class="easyui-textbox" readonly="readonly" name="name" value="JOK" id="name">
</div>
-- 前
<div>
    <input type="text" class="easyui-textbox textbox-f" readonly="readonly" value="JOK" id="name" textboxname="name" style="display: none;">
    <span class="textbox textbox-readonly" style="width: 171px;">
        <input id="_easyui_textbox_input5" type="text" class="textbox-text validatebox-text validatebox-readonly" autocomplete="off" tabindex="" readonly="readonly" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" value="JOK">
    </span>
</div>
$('input[readonly="readonly"]').removeProp("readonly");
--后
<div>
    <input type="text" class="easyui-textbox textbox-f" value="JOK" id="name" textboxname="name" style="display: none;">
    <span class="textbox textbox-readonly" style="width: 171px;">
        <input id="_easyui_textbox_input5" type="text" class="textbox-text validatebox-text validatebox-readonly" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" value="JOK">  -- 由于还存在validatebox-readonly类，所以此时可以编辑，但此处的value并不会随着修改获取到新的值
    </span>
</div>

当使用easyui的data-options="readonly:true"，却不会出现这一现象，代码如下：

<div>
    <input type="text" class="easyui-textbox" data-options="readonly:true" name="name" value="JOK" id="name">
</div>
-- 前
<div>
    <input type="text" class="easyui-textbox textbox-f" data-options="readonly:true" value="JOK" id="name" textboxname="name" style="display: none;">
    <span class="textbox textbox-readonly" style="width: 171px;">
        <input id="_easyui_textbox_input5" type="text" class="textbox-text validatebox-text validatebox-readonly" autocomplete="off" tabindex="" readonly="readonly" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" value="JOK">
    </span>
</div>
$("#name").textbox({readonly:false});
-- 后 id为_easyui_textbox_input+'n' 的input少了readonly="readonly",少了validatebox-readonly类
<div>
    <input type="text" class="easyui-textbox textbox-f" data-options="readonly:true" value="JOK" id="name" textboxname="name" style="display: none;">
    <span class="textbox" style="width: 171px;">
        <input id="_easyui_textbox_input6" type="text" class="textbox-text validatebox-text" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" value="JOK">  -- 此时编辑此处的value会随着修改而获取到新值
    </span>
</div>

有时，根据效果，还会使用到disabled这一属性，当提交时，变更disabled为false，便可将原本不会提交到后台的字段，赋值，提交至后台，实现动态提交，代码如下：

<div>
    <input type="text" class="easyui-textbox" data-options="disabled:true" name="name" value="JOK" id="name">
</div>
-- 前
<div>
    <input type="text" class="easyui-textbox textbox-f" data-options="disabled:true" value="JOK" id="name" textboxname="name" disabled="disabled" style="display: none;">
    <span class="textbox textbox-disabled" style="width: 171px;">
        <input id="_easyui_textbox_input5" type="text" class="textbox-text validatebox-text validatebox-disabled" autocomplete="off" tabindex="" disabled="disabled" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" disabled="disabled" value="JOK">
    </span>
</div>
$("#name").textbox({disabled:false});
-- 后 id为_easyui_textbox_input+'n' 的input少了disabled="disabled",少了validatebox-disabled类
<div>
    <input type="text" class="easyui-textbox textbox-f" data-options="disabled:true" value="JOK" id="name" textboxname="name" style="display: none;">
    <span class="textbox" style="width: 171px;">
        <input id="_easyui_textbox_input6" type="text" class="textbox-text validatebox-text" autocomplete="off" tabindex="" placeholder="" style="text-align: start; margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; width: 163px;">
        <input type="hidden" class="textbox-value" name="name" value="JOKdff">
    </span>
</div>

所以，如果使用easyui控件，最好还是使用easyui API中定义的属性，不要和input框的h5属性混用。