zoukankan      html  css  js  c++  java
  • jquery对标签属性操作

    jquery中添加属性和删除属性:

    $("#2args").attr("disabled",'disabled');
    $("#2args").removeAttr("disabled");

    问题背景:

    选择“选项1”是,“两个参数”这个单选按钮有效。

    选择“选项2”时,让“两个参数”的这个单选按钮无效。

    代码:

    <!DOCTYPE>
    
    <html >
    <head>
      <meta charset="utf-8" />
      <title>demo</title>
    
      <style type="text/css">
    .control-group{
      margin-bottom: 20px;
    }
    .controls{
      display: inline-block;
      vertical-align: top;
    }
    form{
      border:1px dotted #666;
      padding: 30px;
      display: inline-block;
    }
    input[disabled],
    select[disabled],
    textarea[disabled],
    input[readonly],
    select[readonly],
    textarea[readonly] {
      cursor: not-allowed;
    }
      </style>
    <body>
      <form method="post" action="" onsubmit="return false;">
        <div class="control-group">
          <label for="project_name">名称:</label>
          <input name="project_name" maxlength="20" id="project_name" placeholder="项目名称"></div>
        <div class="control-group">
          <label>类型:</label>
          <select id="project_type" onchange="typeChange()">
            <option value="" disabled="disabled"></option>
            <option value="" disabled="disabled">------    [ 类型一 ]    ------</option>
            <option value="1">选项1</option>
            <option value="2">选项2</option>
            <option value="3">选项3</option>
            <option value="" disabled="disabled"></option>
            <option value="" disabled="disabled">------    [ 类型二 ]    ------</option>
            <option value="4">选项4</option>
            <option value="5">选项5</option>
            <option value="6">选项6</option>
          </select>
        </div>
        <div class="control-group">
          <label>参数:</label>
          <div class="controls">
            <br/>
            <label class="radio" for="1arg">
              <input type="radio" name="nodes" id="1arg" value="1" checked="checked" />
              单个参数
            </label>
            <br/>
            <label class="radio" for="2args">
              <input type="radio" name="nodes" id="2args" value="2" />
              两个参数
            </label>
            <br/>
            <label class="radio" for="3args" >
              <input type="radio" name="nodes" id="3args" value="3" disabled="disabled" />
              三个参数
            </label>
          </div>
        </div>
    
        <div class="control-group">
          <button id="create_project" type="submit" onclick="beforecreate()">新建</button>
          <button >取消</button>
        </div>
      </form>
      <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
      <script type="text/javascript">
    function typeChange(){
      var typeLists=['1','2','3','4','5','6'];
      var pj_type=$("#project_type option:selected").val();
      if(pj_type==2){
        $("#2args").attr("disabled",'disabled');
      }else if(pj_type==1){
        $("#2args").removeAttr("disabled");
      }else if($.inArray(pj_type, app_type_list)>=0){
        //后期扩展功能
      }
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    @ModelAttribute注解详细使用
    Spring MVC使用注解实现账户注册与登陆
    @PathVariable、@RequestHeader与@CookieValue注解的使用案例
    IDEA搭建我的第一个Spring MVC应用(附使用注解实现)
    JDBC自定义工具类
    JDBC与MySQL实现分页查询技术
    JavaWeb实战——记录网站上一次访问时间
    微信小程序使用setData修改数组中的指定下标的属性值
    Centos6.x 无法 ping 外网 --- 已解决
    Ckeditor失去焦点前保留光标位置
  • 原文地址:https://www.cnblogs.com/starof/p/4546768.html
Copyright © 2011-2022 走看看