`

JavaScript 修改表单样式和readOnly属性

阅读更多

Java代码 复制代码
  1. function change() {   
  2.        var obj = document.getElementById("condition1");//得到下拉列框对象   
  3.           var index = obj.selectedIndex;//得到下拉列表的下标0,1,2,3,   
  4.           var val = obj.options[index].value;//得到下拉列表的value   
  5.           var text = obj.options[index].text;//得到下拉列表的text   
  6.          //alert(obj);   
  7.          alert(index);   
  8.          //alert(val);   
  9.          //alert(text);   
  10.           if (val == 0){   
  11.               alert("请选择条件!");   
  12.           }else {   
  13.               if(val == 1) {   
  14.                   document.getElementById("condition2").style.backgroundColor = "#c0c0c0";//修改input的背景颜色   
  15.                   document.getElementById("condition2").readOnly = true;//修改input的readOnly属性       
  16.               }   
  17.               else {   
  18.                   var obj2 = document.getElementById("condition2");   
  19.                   obj2.style.backgroundColor = "#ffffff";   
  20.                   document.getElementById("condition2").readOnly = false;            
  21.               }   
  22.           }   
  23.       }  
分享到:
评论

相关推荐

    [removed]为input设置readOnly属性(示例讲解)

    与readonly属性不同的是,disabled属性,它可以使元素完全不可交互,不仅是输入操作,就连其他属性如样式都会受到影响,被禁用的元素也不会向服务器发送任何表单数据。 为了在Javascript中为input设置readonly属性...

    javascript中input中readonly和disabled区别介绍

    在JavaScript中,`readonly` 和 `disabled` 是两个用于表单输入元素的重要属性,它们都可以防止用户直接编辑输入框内的内容,但它们在功能和效果上存在一些差异。 1. **`readonly` 属性**: - `readonly` 属性主要...

    Javascript知识点汇总.doc

    - 原型和原型链:对象之间可以通过原型共享属性和方法。 - this关键字:根据函数调用方式确定其指向的对象。 - ES6新增特性:let和const声明变量,箭头函数,类和模块等。 5. DOM操作 - 创建元素:document....

    disabled与readonly的作用及区别介绍

    在网页开发中,`disabled` 和 `readonly` 是两个非常重要的属性,它们都用于限制用户对HTML表单元素的交互,但它们之间存在着显著的区别。接下来我们将深入探讨这两个属性的作用和差异。 首先,`readonly` 属性主要...

    jquery设置元素的readonly和disabled的写法

    另外,对于 `disabled` 和 `readonly` 属性,浏览器会自动处理对应的样式,如改变文字颜色和背景色,使其看起来不可用。 总之,通过 jQuery 的 `attr()` 和 `removeAttr()` 函数,我们可以方便地控制 HTML 元素的 `...

    设置checkbox为只读(readOnly)的两种方式

    在网页表单设计中,有时候我们希望用户能够看到checkbox(复选框)的状态,但不允许他们修改这些状态,这时就需要将checkbox设置为只读。尽管HTML标准中并未提供直接的`readOnly`属性来实现这一功能,但我们可以通过...

    Javascript知识点汇总.pdf

    10. **只读和禁用属性**:`readonly`属性使输入元素只读,用户不能修改其内容;`disabled`属性使元素失效,用户无法交互。 11. **隐藏域**:`<input type="hidden">`用于创建隐藏字段,它们不显示在页面上,但可以...

    html5定制表单_动力节点Java学院整理

    开发者可以根据实际需求,结合CSS和JavaScript进一步定制表单样式和功能,提供更丰富的用户体验。同时,HTML5还支持其他类型的输入框,如电子邮件、电话、日期等,以及表单验证机制,确保用户提交的数据符合预期格式...

    Javascript高级教程

    - **了解JavaScript**:JavaScript的主要用途包括验证表单、控制网页行为、创建动态内容等。它不受平台限制,可以在任何安装了浏览器的设备上运行。 - **WorldWideWeb**:JavaScript是万维网(World Wide Web)的...

    javascript面试题

    这样,子类就可以访问父类的所有非私有属性和方法。例如: ```javascript function Parent() { this.parentProperty = "I am a parent"; } Parent.prototype.parentMethod = function() { console.log("Parent ...

    让input变成不可编辑状态的方法.pdf

    使用`readonly`属性也可以使输入框不可编辑,但与`disabled`不同,`readonly`的输入框仍会被提交,且样式通常与正常输入框无异。示例: ```html <input type="text" id="myInput" readonly> ``` 3. **CSS 样式*...

    web前端面试题.pdf

    readonly属性表示只读,不可以修改,而disabled属性表示禁用,整个文本框是显示灰色状态。 2. XHTML和HTML的区别 XHTML元素必须被正确地嵌套、闭合、区分大小写,文档必须拥有根元素。HTML则没有这些限制。 3. ...

    锁定text控件文本

    要锁定文本,可以将`TextBox`的`ReadOnly`属性设置为`true`。例如: ```csharp TextBox text1 = new TextBox(); text1.ReadOnly = true; ``` 这样,文本框的内容将无法被用户修改,但仍然可见。 3. **WPF ...

    jquery mobile 完成登录、修改、注册界面设计

    jQuery Mobile提供了预定义的样式和组件,如`<input type="text">`和`<input type="password">`,它们可以自动应用主题样式,使表单看起来更专业。同时,我们还需要添加一个提交按钮,可以通过`登录</a>`实现。为了...

    2022年优秀-Web服务器控件培训教程3.pptx

    例如,TextBox控件的Text属性用于获取或设置文本,TextMode属性可以设定输入框的样式,ReadOnly属性决定用户能否修改文本,AutoPostBack属性则控制是否在文本改变时立即回发页面。 **七、事件处理示例** 当用户在...

    前端学习的第06天.zip

    在前端开发的学习过程中,了解和掌握...在实际项目中,还可以结合CSS和JavaScript进行更复杂的样式定制和行为控制,提升用户体验。前端开发是一个不断学习和探索的过程,每一天的进步都为你的职业生涯打下坚实的基础。

    input值总结

    以上只是`<input>`标签部分知识点的总结,实际使用中还有更多属性和用法,如`form`, `formaction`, `formenctype`, `formmethod`, `formnovalidate`, `formtarget`等,以及各种事件处理如`onchange`, `onclick`等,...

    ExtAspNet_v2.3.2_dll

    -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx(feedback:chenguizhu2006)。 -为所有的表单字段增加AJAX属性ReadOnly(feedback:skydb)。 -Grid中TemplateField生成到页面中控件...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -为Grid增加AutoPostBack属性和RowClick事件,示例在/data/grid_autopostback.aspx(feedback:chenguizhu2006)。 -为所有的表单字段增加AJAX属性ReadOnly(feedback:skydb)。 -Grid中TemplateField生成到页面中控件...

Global site tag (gtag.js) - Google Analytics