Hi all I have the following code:
my code
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
}
}
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
</form>
With my function, I am checking if my input text satisfies my regex. If not then I disabled my button.
With disabling I also want to set the "title" attribute to my input for showing a message.
With console log I can see that pattern and title were successfully added to my input but when I am starting to write something wrong only my button gets disabled and the title not showing the error message.
How can I fix that?
Actually, title attribute could only be shown while the mouse is hovering on the tag, so it is not suitable to add title in input. Maybe it works in next code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" onchange="validate()">
<input type="text" id="FormField_6_input" name="CompanyName" />
<button id="ContinueButton_6">Continue</button>
<span id="wrong_text" style="display:none">wrong</span>
</form>
<script>
let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
let wrongText = document.getElementById('wrong_text');
companyNameField.addEventListener('input', validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
wrongText.style.display = "inline";
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", '[2-9]\\d{3}');
companyNameField.setAttribute("title", "wrong");
wrongText.style.display = "none";
}
}
</script>
</body>
</html>
Look at the above snippet, I've tried to solve your issue. Let me know if it works
let companyNameField = document.getElementById("FormField_6_input");
let button = document.getElementById("ContinueButton_6");
companyNameField.addEventListener("input", validate);
function validate() {
var companyNameValue = companyNameField.value;
var companyRGEX = /[2-9]\d{3}/;
if (companyNameValue.match(companyRGEX)) {
button.disabled = false;
} else {
button.disabled = true;
companyNameField.setAttribute("pattern", "[2-9]\\d{3}");
companyNameField.setAttribute("title", "wrong");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
</head>
<body>
<form action="">
<input
type="text"
id="FormField_6_input"
name="CompanyName"
onchange="validate()"
/>
<button id="ContinueButton_6" disabled>Continue</button>
</form>
</body>
</html>
instead of using regex you can also use parseInt(); and isNaN(); to only allowing numbers to enter.
Related
I am unable to adding event listener to list item which is created by JavaScript.
I am trying to add a event listener to list item such that if I double click to any list item it will remove that particular list item from the DOM.
// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task
function getVal() {
let value = inputbtn.value;
if (value === "") {
alert("Please fill out this field.")
}
else {
let newElement = document.createElement('li')
let liText = document.createTextNode(value)
newElement.appendChild(liText)
list.appendChild(newElement)
}
document.myForm.reset()
}
// Removing Task by ___________
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List Trial</title>
<link rel="stylesheet" href="Trial.css">
</head>
<body>
<h3>To do list</h3>
<form action="" name="myForm">
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
</form>
<!-- JavaScript Source -->
<script src="Trial.js"></script>
</body>
</html>
Instead of adding listeners to each list item add one to the ul element and use event delegation to catch dblclick events as they bubble up the DOM.
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
list.addEventListener('dblclick', handleClick, false);
function handleClick(e) {
if (e.target.nodeName === 'LI') {
e.target.remove();
}
}
function getVal() {
let value = inputbtn.value;
if (value === "") {
alert("Please fill out this field.")
} else {
let newElement = document.createElement('li')
let liText = document.createTextNode(value)
newElement.appendChild(liText)
list.appendChild(newElement)
}
}
<h3>To do list</h3>
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
In this scenario event delegation can come to the rescue. Create one listener function and let that function determine if an action should be performed. Add the listener on the document level for the event types you want the listener to handle.
Here's a snippet to play with.
See also
document.addEventListener(`click`, handle);
document.addEventListener(`dblclick`, handle);
function handle(evt) {
if (evt.target.id === `add-button`) {
const inp = document.querySelector(`#input-but`);
const value = inp.value.trim();
if (value) {
inp.removeAttribute(`placeholder`);
document.querySelector(`ul#text`)
.insertAdjacentHTML(`beforeend`,
`<li class="point">${value}</li>`);
return inp.value = ``;
}
inp.value = ``;
return inp.setAttribute(`placeholder`, `Hey, give me some text!`)
}
if (evt.type === `dblclick` && evt.target.closest(`li`)) {
evt.preventDefault();
evt.target.closest(`li`).remove();
}
}
.point {
cursor: pointer;
}
.point:hover::after {
content: ' (double click to remove)';
color: red;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List Trial</title>
<link rel="stylesheet" href="Trial.css">
</head>
<body>
<h3>To do list</h3>
<form action="" name="myForm">
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
</form>
<!-- JavaScript Source -->
<script src="Trial.js"></script>
</body>
</html>
You can add a listener to the newElement before appending to the parent.
newElement.addEventListener('dblclick', () => newElement.remove());
// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task
function getVal() {
let value = inputbtn.value;
if (value === "") {
alert("Please fill out this field.")
}
else {
let newElement = document.createElement('li')
let liText = document.createTextNode(value)
newElement.appendChild(liText)
// Removing Task by ___________
newElement.addEventListener('dblclick', () => newElement.remove());
list.appendChild(newElement)
}
document.myForm.reset()
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List Trial</title>
<link rel="stylesheet" href="Trial.css">
</head>
<body>
<h3>To do list</h3>
<form action="" name="myForm">
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
</form>
<!-- JavaScript Source -->
<script src="Trial.js"></script>
</body>
</html>
But a simpler solution might be to use event delegation and add a single listener to the parent ul.
list.addEventListener('dblclick', (e) => {
if (e.target.closest('li')) {
e.target.closest('li').remove();
}
})
// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task
function getVal() {
let value = inputbtn.value;
if (value === "") {
alert("Please fill out this field.")
}
else {
let newElement = document.createElement('li')
let liText = document.createTextNode(value)
newElement.appendChild(liText)
list.appendChild(newElement)
}
document.myForm.reset()
}
// Removing Task by ___________
list.addEventListener('dblclick', (e) => {
if (e.target.closest('li')) {
e.target.closest('li').remove();
}
})
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List Trial</title>
<link rel="stylesheet" href="Trial.css">
</head>
<body>
<h3>To do list</h3>
<form action="" name="myForm">
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
</form>
<!-- JavaScript Source -->
<script src="Trial.js"></script>
</body>
</html>
just add event listener to the created list item.
newElement.addEventListener("dblclick", function() {
newElement.remove();
});
it works! 👍
Here it is line 19 newElement.ondblclick=(e)=>newElement.remove()
// Declaring Variables
let inputbtn = document.getElementById('input-but');
let addBtn = document.getElementById('add-button');
let list = document.getElementById('text');
addBtn.addEventListener('click', getVal)
// Adding Function to Add New task
function getVal() {
let value = inputbtn.value;
if (value === "") {
alert("Please fill out this field.")
}
else {
let newElement = document.createElement('li')
let liText = document.createTextNode(value)
newElement.appendChild(liText)
list.appendChild(newElement)
newElement.ondblclick=(e)=>newElement.remove()
}
document.myForm.reset()
}
// Removing Task by ___________
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do List Trial</title>
<link rel="stylesheet" href="Trial.css">
</head>
<body>
<h3>To do list</h3>
<form action="" name="myForm">
<input type="text" id="input-but" required>
<input type="button" id="add-button" value="Add Task">
<ul id="text"></ul>
</form>
<!-- JavaScript Source -->
<script src="Trial.js"></script>
</body>
</html>
I am a beginner in Javascript and is currently trying to make a todo list web app. But currently stucked at the edit button.
As you can see, I wanted to make an editable checklist but somehow everytime I hit the edit button, a new input comes out instead of replacing the current one. It also removes the 'checkbox' somehow.
Can anyone tell me where I did wrong? Thank you for your time!
Somehow the edit button doesn't work at all when I try to run it on VSCode. Here it works, but not as I wanted though.
const ul = document.querySelector('#invitedList');
ul.addEventListener('click', (event) => {
if(event.target.tagName === 'BUTTON') {
const button = event.target;
const li = button.parentNode;
if(button.textContent === 'edit') {
const span = li.firstElementChild;
const input = document.createElement('input');
input.type = 'text';
input.value = span.textContent;
li.insertBefore(input, span);
li.removeChild(span);
button.textContent = 'save';
} else if(button.textContent === 'save') {
const input = li.firstElementChild;
const span = document.createElement('span');
span.textContent = input.value;
li.insertBefore(span, input);
li.removeChild(input);
button.textContent = 'edit';
}
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="test.js"></script>
</head>
<body>
<!-- TASK LIST THAT IS SUPPOSED TO BE EDITABLE GOES DOWN HERE, AS A TEMPLATE -->
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>
Have you considered trying Node.ReplaceChild() instead of creating a new element? Not sure how to tell you exactly how to do it but here is a link to the documentation:
https://developer.mozilla.org/en-US/docs/Web/API/Node/replaceChild
I'd suggest to change styling instead of creating and removing elements. Here is possible solution:
let isEditState = false;
const editButton = document.querySelector('#editbtn');
editButton.addEventListener('click', (event) => {
const span = document.querySelector('#editable');
const checkbox = document.querySelector('#checkbox');
const text = document.querySelector('#text');
if (isEditState) {
span.innerText = text.value;
checkbox.style.display = 'inline';
text.style.display = 'none';
editButton.innerText = 'edit';
} else {
checkbox.style.display = 'none';
text.style.display = 'inline';
editButton.innerText = 'save';
}
isEditState = !isEditState;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="taskit" class="task">
<ul id="invitedList">
<input type="checkbox" id="checkbox"/>
<input type="text" id="text" style="display: none"/>
<label>
<span id="editable" class="custom-checkbox">Edit This</span>
</label>
<button type="submit" id="editbtn">edit</button>
</ul>
</div>
</body>
</html>
I've been experimenting with a local sign in/log in system and I've hit a error. I was trying to make a regular expression that checks if the user's username and password contain 8 characters and 2 numbers. I really am not sure how to do that but this is all my code I've been able too put togheter.
HTML code:
<!DOCTYPE html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id='form'>
<title>Sign Up #1</title>
<h3>Simple Signup system</h3>
<div>
<label>Username:</label>
<input type="text" name="text1" id = "username">
</div>
<div>
<label>Password:</label>
<input type="text" name="text2" id = "password">
<div>
<button type="button" id="subBtn">Sign Up!</button>
</form>
</body>
<script src="main.js"></script>
</html>
My JS code:
var t = 'everything good, loging in'
var f = 'something is not right, try again.'
var tf = 'not-set'
var statment = /^[a-zA-Z]*$/
window.onload = function() {
document.getElementById('subBtn').addEventListener('click', onSubmit);
}
// main
function onSubmit() {
if (document.getElementById('username').value.includes(Number)) {
tf = 'True'
} else {
tf = 'False'
}
if (document.getElementById('username').value.includes(statment)) {
tf.push('True')
} else {
tf.push('False')
}
if (tf = ['True', 'True']) {
alert('Good to go, redirecting')
} else {
alert('Username does not meet the standards for creating a account!')
}
document.forms['forms1'].submit()
}
EDIT: Was able to redo a part of the code, I'm still using regex to check for letters because I'm not sure how to do it without it.
Current error: 'first can't be a Regular Expression'.
This example prompts for barcode scan, and then places the value into "scan-input" box. This works great for ONE input/ONE button.
My issue is i want to be able to add multiple inputs/buttons, and have the scan then place the value in the corresponding input text box.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scandit Web SDK</title>
<link rel="stylesheet" href="style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'/>
<!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
<script src="https://cdn.jsdelivr.net/npm/scandit-sdk#4.x"></script>
</head>
<body onclick="console.log('body clicked')">
<div id="scandit-barcode-picker"></div>
<div id="input-container">
<input id="scan-input" type="text" placeholder="Scan Receiver...">
<button id="scan" onclick="scan()">SCAN
</button>
</div>
<script>
function scan() {
startScanning();
}
function showScanner() {
scannerContainer.style.opacity = "1";
scannerContainer.style.zIndex = "1";
}
function hideScanner() {
scannerContainer.style.opacity = "0";
scannerContainer.style.zIndex = "-1";
}
function startScanning() {
showScanner();
if (picker) {
picker.resumeScanning();
}
}
function stopScanning() {
hideScanner();
if (picker) {
picker.pauseScanning();
}
}
// Configure the library and activate it with a license key
const licenseKey = "LICENSE_KEY_HERE";
// Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk#4.x/build"
ScanditSDK.configure(licenseKey, { engineLocation: engineLocation });
const scannerContainer = document.getElementById("scandit-barcode-picker");
scannerContainer.style.opacity = "0";
scannerContainer.style.zIndex = "-1";
const scanInput = document.getElementById("scan-input");
let picker;
// Create & start the picker
ScanditSDK.BarcodePicker.create(scannerContainer)
.then(barcodePicker => {
picker = barcodePicker;
// Create the settings object to be applied to the scanner
const scanSettings = new ScanditSDK.ScanSettings({
enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
});
picker.applyScanSettings(scanSettings);
picker.on("scan", scanResult => {
stopScanning();
scanInput.value = scanResult.barcodes[0].data;
});
picker.on("scanError", error => alert(error.message));
picker.resumeScanning();
})
.catch(alert);
</script>
</body>
<style>#scan:after {display:none;}</style>
</html>`
I want to be able to add multiple buttons/inputs. and have the corresponding button place it into the scan-input spot.
`<input id="scan-input" type="text" placeholder="Scan Receiver...">
<button id="scan" onclick="scan()">SCAN</button>
<input id="scan-input2" type="text" placeholder="Scan Receiver #2...">
<button id="scan2" onclick="scan()">SCAN</button>`
[text1] [button1] ----- scan places value into text1
[text2] [button2] ----- scan places value into text2
Here's a slightly adapted version of your HTML (using a digit in every id will help us keep things simpler):
<input type="text" id="scan-input1" />
<button type="button" id="scan1">SCAN</button>
<br />
<input type="text" id="scan-input2" />
<button type="button" id="scan2">SCAN</button>
Then, in our JavaScript, we can use the following function to send a message to scan-input1 if scan1 is pressed, scan-input2 if scan-2 is pressed, and so on:
[...document.getElementsByTagName('button')].forEach((el) => {
el.addEventListener('click', (e) => {
const num = e.currentTarget.id.match(/\d+$/)[0];
document.getElementById(`scan-input${num}`).value = "Scan Complete";
});
});
The code above:
Adds a click event listener to every button,
Gets the number from the id of whichever button is clicked,
Uses that number to target the correct input.
The advantage of the solution above is that it scales automatically. As long as you follow the same naming convention for each id (scan3, scan-input3, etc.), every a new button and input will have identical behaviour.
Edit: Your Code
Below, I've inserted my suggestion into your code - only changing the bare minimum:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Scandit Web SDK</title>
<link rel="stylesheet" href="style.css">
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<!-- Add the library, as explained on http://docs.scandit.com/stable/web/index.html -->
<script src="https://cdn.jsdelivr.net/npm/scandit-sdk#4.x"></script>
</head>
<body onclick="console.log('body clicked')">
<div id="scandit-barcode-picker"></div>
<div id="input-container">
<input type="text" id="scan-input1" />
<button type="button" id="scan1" placeholder="Scan Receiver...">SCAN</button>
<br />
<input type="text" id="scan-input2" />
<button type="button" id="scan2" placeholder="Scan Receiver...">SCAN</button>
<br />
<input type="text" id="scan-input3" />
<button type="button" id="scan3" placeholder="Scan Receiver...">SCAN</button>
</button>
</div>
<script>
let scanInput;
[...document.getElementsByTagName('button')].forEach((el) => {
el.addEventListener('click', (e) => {
const num = e.currentTarget.id.match(/\d+$/)[0];
scanInput = document.getElementById(`scan-input${num}`);
scan();
});
});
function scan() {
startScanning();
}
function showScanner() {
scannerContainer.style.opacity = "1";
scannerContainer.style.zIndex = "1";
}
function hideScanner() {
scannerContainer.style.opacity = "0";
scannerContainer.style.zIndex = "-1";
}
function startScanning() {
showScanner();
if (picker) {
picker.resumeScanning();
}
}
function stopScanning() {
hideScanner();
if (picker) {
picker.pauseScanning();
}
}
// Configure the library and activate it with a license key
const licenseKey = "LICENSE_KEY_HERE";
// Configure the engine location, as explained on http://docs.scandit.com/stable/web/index.html
const engineLocation = "https://cdn.jsdelivr.net/npm/scandit-sdk#4.x/build"
ScanditSDK.configure(licenseKey, {
engineLocation: engineLocation
});
const scannerContainer = document.getElementById("scandit-barcode-picker");
scannerContainer.style.opacity = "0";
scannerContainer.style.zIndex = "-1";
let picker;
// Create & start the picker
ScanditSDK.BarcodePicker.create(scannerContainer)
.then(barcodePicker => {
picker = barcodePicker;
// Create the settings object to be applied to the scanner
const scanSettings = new ScanditSDK.ScanSettings({
enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39"]
});
picker.applyScanSettings(scanSettings);
picker.on("scan", scanResult => {
stopScanning();
scanInput.value = scanResult.barcodes[0].data;
});
picker.on("scanError", error => alert(error.message));
picker.resumeScanning();
})
.catch(alert);
</script>
</body>
<style>
#scan:after {
display: none;
}
</style>
</html>`
This question already has answers here:
Disabling and enabling a html input button
(12 answers)
Closed 5 years ago.
When event A happens I disable a button:
if (document.getElementById('detail_n').checked) {
chkxp.disabled = true; }
But if event B happens I want to re-enable the button:
if (document.getElementById('detail_y').checked) {
chkxp.disabled = false; }
That did not re-enable the button. I tried:
chkxp.removeAttribute('disabled');
That did not work either.
I HAVE LOOKED AT THE OTHER PAGES WHICH PRESENT SOLUTIONS, AND THEY ARE EXACTLY WHAT I ALREADY HAVE, WHICH IS NOT WORKING FOR ME. THAT IS WHY I AM ASKING AGAIN.
The only thing that worked is to re-submit the page. That would be a huge pain for the user, since there is a lot of stuff to fill into that form.
I'm in firefox. Can anyone give me a Javascript solution that does work?
It seems to work fine with setting disabled to true and then removing the disabled attribute in order to re-enable the buttton. checkout MDN nd snippet below: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/disabled
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
btn2.addEventListener('click', function (e) {
if (btn.disabled === true) {
btn.removeAttribute('disabled');
console.log('Target is enabled');
}
else {
console.log('Target is disabled');
btn.disabled = true;
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="btn">Target</button>
<button id="btn2">Click here !</button>
</body>
</html>
UPDATE
Snippet for radio buttons.
if my snippet doesn't work on your browser, please check your browser settings.
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
var btn3 = document.getElementById('btn3');
btn2.addEventListener('change',function () {
if (btn2.checked === true) {
btn.disabled = true;
}
});
btn3.addEventListener('change',function () {
if (btn3.checked === true) {
btn.removeAttribute("disabled");
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="radio" id="btn"><label for="btn">Target</label>
<input type="radio" name="x" id="btn2"><label for="btn2">Disable target</label>
<input type="radio" name="x" id="btn3"><label for="btn3">Enable target</label>
</body>
</html>