Single-selection box to achieve the same effect as linkage

In the project development, encountered a similar linkage effect of the single marquee effect. That is, when you click on the Radio box, another one is selected by default, and the other radio boxes are not editable or editable. The following are the specific requirements:

<p> when the charge type is:</p><p> one-time fee--> default check initial principal (other not optional)--> calculation base is not optional (that is, there is no point in that box) </p><p> Bill of Fare Use--> default to select the remaining principal (other not optional)--> calculation basis can be selected (that is, the default selection of one, you can click between the two options) </p><p> irregular fees--> Default Check initial principal (other not optional)--&G T Calculation Base not selectable </p>

<% @pagelanguage = "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%>

<divid= "Winprodbaseinfo" class= "Easyui-window" title= "admin" data-options= "modal:true,closed:true,iconcls": ' Icon-save ' "style=" width:550px;height:450px;padding:10px; "
	> <divstyle= "padding:10px 0 10px 60px" > <formid= "fprodbaseinfo" name= "Fprodbaseinfo" method= "POST" > 
				<inputid= "F_glfiuuid" name= "Glfiuuid" type= "hidden" value= "" > <table> <tr> <td> name </td> <td> <inputclass= "Easyui-validatebox" type= "text" id= "F_feename" name= "Feename" data-options= "Required:tru" E "maxlength=" style= "width:205px"/> </td> </tr> <tr> <td> range </td> < td> <selectclass= "Easyui-combobox" id= "F_targettype" name= "TargetType" data-options= "Editable:false" panelheight= "Auto" style= "width:210px" > <optionvalue= "" >--Please select--</option> <optionvalue= "P" Selected= "selected" > Interest rate </option> <optionvalue= "V" > Net worth </option> <optionvalue= "A" > Cast Capital Account &Lt;/option> </select> </td> </tr> <tr> <td> type </td> &LT;TD&G
					T
			<inputclass= "Easyui-validatebox" type= "text" id= "F_feebooktype" name= "Feebooktype"/> </td> </tr> <tr> <td> charge type </td> <td> <inputtype= "Radio" checked= "Checked" name= "Feetype" value= "0" /> One-time fee <inputtype= "Radio" name= "Feetype" value= "1"/> Billing fee <inputtype= "Radio" name= "Feetype" value= "2"/& gt; irregular cost </td> </tr> <tr> <td> billing Cardinal </td> <td> <inputtype= "
					Radio "checked=" Checked "name=" Printype "value=" 0 "/> Initial principal <inputtype=" Radio "name=" Printype "value=" 2 "/> The principal of existence <inputtype= "Radio" name= "Printype" value= "3"/> Asset scale </td> </tr> <tr> <td> Computing Basics </td> <td> <inputtype= "Radio" name= "basis" value= "0" >a/360 <inputtype= "Radio" name= "Basis" value= "1" &Gt a/365 </td> </tr> <tr> <td> remarks </td> <td> <inputclass = "Easyui-textbox" data-options= "Multiline:true" name= "remark" style= "width:210px;height:60px" > </td> ;/tr> </table> </form> </div> <divstyle= "text-align:center;padding:5px" > <ahref= "ja Vascript:void (0) "class=" Easyui-linkbutton "id=" Btn_save "onclick=" SaveData () "> Save </a> <ahref="
 Javascript:void (0) "class=" Easyui-linkbutton "onclick=" CloseWindow () "> Cancel </a> </div> </div>

function AddData () {$ (' #fProdBaseInfo '). Form (' clear ');	Empty the elements in the form easyui.disableform (' Fprodbaseinfo ', false); Set to editable//* Default popup fee type: One-time fee charge base: initial principal *//*$ (' input[name = Printype]:radio '). each (function () {if (t
		His.value = = ' 0 ') {this.checked = true;
	})/////////* (' Input[name = Feetype] '). Get (0). checked = true;
	$ (' Input[name = Printype] '). Get (0). checked = true;
	$ (' Input[name = basis] '). each (function () {this.disabled= "disabled"; ///////////////////////////////////////////////////////////////The
			. checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			});
			$ (' Input[name = basis] '). each (function () {this.disabled= "disabled";
		});		}) $ (' #winProdBaseInfo '). Window (' open ');
			New pop-up window/*//linkage effect $ (' Input[name = Feetype]:radio '). each (function () {if (This.value = = ' 1 ') {$ (' Input[name = Printype] '). Get (1). checked = true;
			}else{$ (' input[name = Printype] '). each (function () {this.disabled= "disabled";
		});
	}) *///charge type $ (' Input[name = Feetype]:radio '). Unbind (); $ (' Input[name = Feetype]:radio '). Bind (' click ', function () {//charging method for the billing fee--> default selection of the surviving principal--> calculation basis can be selected if (This.value =
			= ' 1 ') {//$ (' input[name = Printype] '). Get (1). checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (This.value = = ' 2 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			
			}
			});
				$ (' Input[name = Basis]:radio '). each (function () {this.disabled = "";
				if (this.value = = ' 0 ') {this.checked = true;
		}
			});
			//When clicked switch the charge type is: One-time fee billing Base: Initial principal calculation base can not click if (this.value = = ' 0 ') {this.checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			}); $ (' Input[name = Basis]:radio '). EACH (function () {this.disabled= "disabled";		this.checked = false;
		Remove optional});
			///When clicked switch the charge type is: Irregular cost--> The default to select the initial principal--> the calculation base does not select if (this.value = = ' 2 ') {this.checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			});
				$ (' Input[name = Basis]:radio '). each (function () {this.disabled= "disabled";		this.checked = false;
		Remove optional});
	
	
}
		
	});
 }

The main JS method is

The default pop-up charge type is: One-time fee billing Base: initial principal $ (' Input[name = Feetype]:radio '). each (function () {if (This.value = ' 0 ') {this.checked
			= true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			});
			$ (' Input[name = basis] '). each (function () {this.disabled= "disabled";
		});		}) $ (' #winProdBaseInfo '). Window (' open ');
	New pop-up window//charge type $ (' Input[name = Feetype]:radio '). Unbind (); $ (' Input[name = Feetype]:radio '). Bind (' click ', function () {//charging method for the billing fee--> default selection of the surviving principal--> calculation basis can be selected if (This.value =
			= ' 1 ') {//$ (' input[name = Printype] '). Get (1). checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (This.value = = ' 2 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			
			}
			});
				$ (' Input[name = Basis]:radio '). each (function () {this.disabled = "";
				if (this.value = = ' 0 ') {this.checked = true;
		}
			}); //Toggle When clicked Charge type: One-time fee base: Initial principal calculation can not click if (this.value = = ' 0 ') {this.checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			});
				$ (' Input[name = Basis]:radio '). each (function () {this.disabled= "disabled";		this.checked = false;
		Remove optional});
			///When clicked switch the charge type is: Irregular cost--> The default to select the initial principal--> the calculation base does not select if (this.value = = ' 2 ') {this.checked = true;
				$ (' Input[name = Printype]:radio '). each (function () {if (this.value = = ' 0 ') {this.checked = true;
				}else{this.disabled= "Disabled";
			}
			});
				$ (' Input[name = Basis]:radio '). each (function () {this.disabled= "disabled";		this.checked = false;
		Remove optional});
 }
		
	});

The main idea is to use jquery's attribute filter selector to refer to the following code:
<style type= "Text/css" >
/* Highlighting * *
. highlight{
Background-color:gray
}
</style>

。 The code is as follows:
<body>
<div>
<p>Hello</p>
</div>
<div id= "test" >id as Test div</div>
<input type= "checkbox" id= "S1" name= "Football" value= "football"/> Football
<input type= "checkbox" name= "Volleyball" value= "Volleyball"/> Volleyball
<input type= "checkbox" id= "S3" Name= "basketball" value= "basketball"/> Basketball
<input type= "checkbox" id= "S4" Name= "other" value= "others"/> Other
</body>

1. [Attribute] Usage
Definition: Matches the element that contains the given property
。 The code is as follows:
$ ("Div[id]"). AddClass ("highlight"); Find all DIV elements that contain ID attributes

2. [Attribute=value] Usage
Definition: Matches the given property is an element of a particular value
。 The code is as follows:
$ ("Input[name= ' basketball ']"). attr ("Checked", true); The Name property value is basketball INPUT element selected

3. [Attribute!=value] Usage
Definition: Matching a given property is an element that does not contain a specific value
。 The code is as follows:
$ ("input[name!= ' basketball ']"). attr ("Checked", true); The Name property value is not selected for basketball INPUT element
This selector is equivalent to: not ([Attr=value]) to match elements that contain specific attributes but not equal to a particular value, use [Attr]:not ([Attr=value])
$ ("Input:not (input[name= ' basketball ')"). attr ("Checked", true);

4. [Attribute^=value] Usage
Definition: Matches a given property as an element starting with some value
。 The code is as follows:
$ ("input[name^= ' foot ']"). attr ("Checked", true); Find all input elements with ' foot ' started in name

5. [Attribute$=value] Usage
Definition: Matches the given property is an element that ends with some value
。 The code is as follows:
$ ("input[name$= ' Ball ']"). attr ("Checked", true); Find all input elements with name ending with ' ball '

6. [Attribute*=value] Usage
Definition: Matches a given property to an element that contains certain values
。 The code is as follows:
$ ("input[name*= ' sket ']"). attr ("Checked", true); Find all input elements with ' sket ' in name

7. [Selector1][selector2][selectorn] Usage
Definition: Composite property selector, which needs to be satisfied with multiple conditions
。 The code is as follows:
$ ("input[id][name$= ' Ball ']"). attr ("Checked", true); Find all references that contain the id attribute, and its Name property is the ball end of the reference article from: http://www.poluoluo.com/jzxy/201401/261474.html http://www.3lian.com/edu /2015/05-28/217161.html