easyUI 设置文本框是否可编辑

最新推荐文章于 2020-12-22 04:58:25 发布

窥云

最新推荐文章于 2020-12-22 04:58:25 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： easyUI 文章标签： easyui textbox

本文链接：https://blog.youkuaiyun.com/qq_35001928/article/details/78038124

easyUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的文本框控件，并通过添加复选框来控制文本框的可编辑状态及文本颜色的变化。该方法适用于需要在界面上灵活控制用户输入的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求说明：在文本框之后增加一个复选框，勾选则可以编辑，不勾选则无法编辑。
方法说明：

获取当前控件属性值
var state = $(‘#id).textbox(‘options’).readonly;
此处的textbox可为easyUI其他控件^_^
改变文本框是否可编辑
$(‘#id).textbox(‘readonly’,false);//设置文本框可编辑

$(‘#id).textbox(‘readonly’,true);//设置文本框不可编辑
改变文本颜色
$(“.wblj_kp .textbox .textbox-text”).css(‘color’,’#ccc’);//灰色

$(“.wblj_kp .textbox .textbox-text”).css(‘color’,’#555a66’);//黑色
具体代码：
js代码：

$(document).ready(function(){
                $('#articlesRedirecturl').textbox('readonly',true);
                $(".wblj_kp .textbox .textbox-text").css('color','#ccc');/* #555a66 */
`});``

`function show(){
                var state = $('#articlesRedirecturl').textbox('options').readonly;
                if(state==true){
                    $('#articlesRedirecturl').textbox('readonly',false);
                    $(".wblj_kp .textbox .textbox-text").css('color','#555a66');
                }else if(state==false){
                    $('#articlesRedirecturl').textbox('readonly',true);
                    $(".wblj_kp .textbox .textbox-text").css('color','#ccc');
                }
            }`

html代码：

                <div class="kRight">
                    <div class="w254">
                        <input class="easyui-textbox" id="articlesRedirecturl" name="model.articlesRedirecturl" type="text" value="${model.articlesRedirecturl}">
                    </div>
                    <div class="kRight_r lh34">
                        <input type="checkbox" name="likeBoolean" onchange="show();"><span class="marginl10">勾选后稿件可查看外部链接</span>
                    </div>
                 </div>
            </div>

“`