search

Home >Web Front-end >JS Tutorial >Add attributes and delete attributes in jquery_jquery

Add attributes and delete attributes in jquery_jquery

WBOY
WBOYOriginal
2016-05-16 15:56:521140browse

Add attributes and delete attributes in jquery:

Copy code The code is as follows:

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

Problem background:

When "Option 1" is selected, the "Two Parameters" radio button is valid.

When "Option 2" is selected, disable the "Two Parameters" radio button.

Code: 

<!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>

The above is the entire content of this article, I hope you all like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Tutorial on implementing dialog boxes with JavaScript_Basic knowledgeNext article：Tutorial on implementing dialog boxes with JavaScript_Basic knowledge

Related articles

See more