While browsing websites, I noticed that some have checkbox options for:
Family: Wife Husband Son Daughter None. If "None" is selected, the rest of the options are disabled.
While browsing websites, I noticed that some have checkbox options for:
Family: Wife Husband Son Daughter None. If "None" is selected, the rest of the options are disabled.
Feel free to utilize this code - hopefully, it proves beneficial for your needs!
Thank you.
<input type="checkbox" name="check" value="father" class="group1">Father
<input type="checkbox" name="check" value="mother" class="group1">Mother
<input type="checkbox" name="check" value="son & daughter" class="group1">Son & Daughter
<input type="checkbox" name="check" value="none" id="none" class="group1">None
$(function(){
$("#none").on("click", function(){
if(this.checked) {
$("input.group1").attr("disabled", true);
} else {
$("input.group1").attr("disabled", false);
}
});
});
"use strict";
console.clear();
{
document.addEventListener('click', e => {
const target = e.target
if (target.nodeName.toLowerCase() == 'input' && target.type == 'checkbox' && target.dataset.trigger && target.dataset.trigger == 'none') {
Array.from(target.form[target.name]).filter(element => element != target).forEach(el => el.disabled = target.checked)
}
})
}input:disabled + label {
color: lightgray;
}<form id="my-form">
<input type="checkbox" id="my-form-relatives-wife" name="relatives">
<label for="my-form-relatives-wife">Wife</label>
<input type="checkbox" id="my-form-relatives-husband" name="relatives">
<label for="my-form-relatives-husband">Husband</label>
<input type="checkbox" id="my-form-relatives-son" name="relatives">
<label for="my-form-relatives-son">Son</label>
<input type="checkbox" id="my-form-relatives-daughter" name="relatives">
<label for="my-form-relatives-daughter">Daughter</label>
<input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
<label for="my-form-relatives-none">None</label>
</form>Here is a backward compatible version
"use strict";
console.clear();
{
document.addEventListener('click', function(event) {
var targetElement = event.target
if (targetElement.nodeName.toLowerCase() == 'input' && targetElement.type == 'checkbox' && targetElement.dataset.trigger && targetElement.dataset.trigger == 'none') {
Array.prototype.filter.call(targetElement.form[targetElement.name], function(element) { return element != targetElement }).forEach(function(element) { return element.disabled = targetElement.checked})
}
})
}input:disabled + label {
color: lightgray;
}<form id="my-form">
<input type="checkbox" id="my-form-relatives-wife" name="relatives">
<label for="my-form-relatives-wife">Wife</label>
<input type="checkbox" id="my-form-relatives-husband" name="relatives">
<label for="my-form-relatives-husband">Husband</label>
<input type="checkbox" id="my-form-relatives-son" name="relatives">
<label for="my-form-relatives-son">Son</label>
<input type="checkbox" id="my-form-relatives-daughter" name="relatives">
<label for="my-form-relatives-daughter">Daughter</label>
<input type="checkbox" id="my-form-relatives-none" name="relatives" data-trigger="none">
<label for="my-form-relatives-none">None</label>
</form>I recently started using Datetimepicker for date and time input, but I'm a bit confused about the timezone option. How does it affect the data submission to a datetime datatype in MySQL and what changes can I expect when selecting back the data? Any i ...
I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...
I have implemented a function using $(window).bind("beforeunload", function(e) {}) to trigger an ajax call before the browser is closed. During testing on my local machine, this function works perfectly fine. It successfully performs the AJAX call when e ...
I am working on grasping the concept of functional programming. My understanding so far is that it involves encapsulating everything into functions and passing them around. For instance, in my current example, I am attempting to fetch data from a RESTApi a ...
I've been working with HTML and trying to embed links in my webpages that are in offline mode. After doing some research, I came across the following code snippet: MyClickTagButton.addEventListener( MouseEvent.CLICK, function():void { if (roo ...
When making a $http.delete request in my Angular app, I include a config object using the following approach: return $http.delete('projects/' + projectID + '/activityTypes', {data: [{id: 2}]}) This method attaches the values from my d ...
I am facing a challenge while trying to make two separate model calls using the MERN stack. The issue arises when I try to send an array in res.json; extracting the data seems to be problematic. On examining the console log: {data: "[]", status: ...
I am facing an issue with calculating the total value of radio button selections in three rows. Each row belongs to a specific group, and I want the value of each selection to appear in the last column. The first radio button in each row has a value of 2, ...
I'm struggling to update the popovers contents with Ajax result in my ASP.Net MVC4 project. Using ASP.Net (MVC4): public ActionResult GetEmployeeDetails(string employeeId) { var contract = UnitOfWork.ContractRepository.ContractBu ...
Is there a way for me to show a visual element at specific coordinates on the browser screen? For example, let's say I have calculated dynamic offsets of { left: 336, top: 378 }, and I would like to display a small line or image at that position. Is ...
I have a unique file structure where my package.json contains a single variable called settings which defines the port for the application: package.json ... "settings":{ "port": "3000" }, ... In addition, I've set up a custom script to execute a ...
Having a visual composer installed on my Wordpress site, I encountered an issue where inserting an image or any element and applying animation from within visual composer would cause the page to go blank with no animations showing. After reaching out to t ...
Setting up a react-native android project on my Windows machine has been successful so far. To run the project, I use the command react-native run-android and then the installed apk is generated on my phone. After making some changes in the index.android. ...
Need help with displaying data in two dependent select boxes based on the selection of the first box. <?php $con=mysql_connect("localhost","root","root"); mysql_select_db("register",$con); ?> <!DOCTYPE html> <html&g ...
Hello everyone, I could use some help with the following code snippet: rowRenderer = (e) => { debugger; return e.data?.fileName ? '<a class="documentLink" onclick={() => \'' + console.log('\ ...
Bootstrap is not my strong suit. I'm struggling with getting the collapse effect to work properly. Can anyone provide some guidance? Here is the link to the bootstrap I am using: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/boo ...
When I retrieve news with a specific id from my REST API, using ng-repeat to display all news works fine. However, when I try to display a single object, this method does not work. My route code: .when('/displaynews/:id',{ templateUrl: &apo ...
I have a question regarding the process of developing web applications in Nuxt 3 using the composition API. I am working on an application that requires user location-dependent content. To achieve this, I need to determine the user's IP address using ...
My main component fetches children using react-router in the following manner: class MainComponent extends Component { render() { return ( <div> {React.cloneElement(children, this.props.data)} </div> ) } } I a ...
I am attempting to create a specific scenario where I can restrict my string to three digits, followed by a dot and two optional digits after the dot. For example: 100.00 1 10.56 31.5 I've developed a regex pattern that allows me to filter out any ...