The name
attribute of the CheckBox is used to group Checkboxes. When the Checkboxes are grouped in form, the checked items value
attribute
will post to the server on form submit which can be retrieved through the name. The disabled and unchecked CheckBox
value will not be sent to the server on form submit.
In the following code snippet, Cricket and Hockey are in the checked state, Tennis is in disabled
state and Basketball is in unchecked state.
Now, the value that is in checked state only be sent on form submit.
import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
function App() {
return (<form>
<ul>
<li><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true}/></li>
<li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true}/></li>
<li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true}/></li>
<li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball"/></li>
<li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
</ul>
</form>);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Button</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='check-box'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.e-checkbox-wrap {
margin-top: 18px;
}
button {
margin: 0 0 0 5px;
}
li {
list-style: none;
margin: 25px auto;
}
import { enableRipple } from '@syncfusion/ej2-base';
import { ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// Name and Value attribute in form submit.
function App() {
return (
<form>
<ul>
<li><CheckBoxComponent name="Sport" value="Cricket" label="Cricket" checked={true} /></li>
<li><CheckBoxComponent name="Sport" value="Hockey" label="Hockey" checked={true} /></li>
<li><CheckBoxComponent name="Sport" value="Tennis" label="Tennis" disabled={true} /></li>
<li><CheckBoxComponent name="Sport" value="Basketball" label="Basketball" /></li>
<li><ButtonComponent isPrimary={true}>Submit</ButtonComponent></li>
</ul>
</form>
);
}
export default App;
ReactDom.render(<App />, document.getElementById('check-box'));