form表单元素设置只读

1.设置文本框只读

<!--  方法一：简写 -->
<input type="text" name="" value="文本框" class="" readonly/>
<!--  方法二：写全 -->
<input type="text" name="" value="文本框" class="" readonly="readonly"/>

2.设置单选框只读（禁用）

<td class="tdbiejing" nowrap="nowrap">允许调剂</td>
<td nowrap="nowrap">
    <label class="radioCss">
        <input name="isAdjust" id="" type="radio" value="" disabled
            <c:if test="${model.coumn==0 }">checked</c:if>/>
        是
    </label>                                                                        
    <label class="radioCss">
        <input name="isAdjust" id="" type="radio" value="" disabled
            <c:if test="${model==1 }">checked</c:if>/>
        否
    </label>                                                                        
</td>

3.禁用下拉列表框

<select id="" name="" nowrap="nowrap" class="TextBox" disabled>
    <option value="">选项一</option>
    <option value="">选项二</option>
    <option value="">选项三</option>
</select>

小结：

　　1.标签属性：只读readonly、禁用disabled、单选框&复选框默认选中checked、下拉列表框默认选中selected都可以简写;

　　2.设置disabled属性后，该元素的数据将无法提交，可以添加一个隐藏域

　　　　<input id="" name="" type="hidden" value="" />。

2022年4月21日14:59:59

4.js控制

设置只读

document.getElementById('id').readOnly = "readOnly";
document.getElementById('id').readOnly = "readonly";
document.getElementById('id').readOnly = true;

取消只读

document.getElementById('id').readOnly = '';
document.getElementById('id').readOnly = false;
document.getElementById('id').readOnly = null;

说明：

使用js控制只读属性的话，用的是readOnly，而不是readonly，O要大写，否则不生效。

设置禁用

document.getElementById('SCORE').disabled = 'disabled';
document.getElementById('SCORE').disabled = true;

取消禁用

document.getElementById('SCORE').disabled = '';
document.getElementById('SCORE').disabled = false;
document.getElementById('SCORE').disabled = null;

5.jQuery控制

设置只读

// 只读
$('#id').prop('readonly', true);
$('#id').attr('readonly', true);
$('#id').attr('readonly', 'readonly');
$('#id').prop('readonly', 'readonly');

取消只读

$('#id').prop('readonly', false);
$('#id').attr('readonly', false);
$('#id').prop('readonly', '');
$('#id').prop('readonly', null);

设置禁用

$('#SCORE').prop('disabled', true);
$('#SCORE').prop('disabled', 'disabled');
$('#SCORE').attr('disabled', true);
$('#SCORE').attr('disabled', 'disabled');

取消禁用

$('#SCORE').prop('disabled', false);
$('#SCORE').prop('disabled', '');
$('#SCORE').attr('disabled', false);
$('#id').prop('disabled', null);

 

写在最后

　　哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

 相关推荐：

• 个人主页
• js重置form表单
• js-form表单元素的自定义属性