keep checkbox disabled and unchecked if any other two checkboxes are checked - html

I am trying to keep #b0 disabled and unchecked if #b1 and/or #b2 is/are checked. The snippet below re-enables #b0 if uncheck #b1 or #b2
let boxes = $('#b1, #b2');
boxes.click(function() {
if (boxes.filter(':checked').length > 0) {
$("#b0").prop("disabled", this.checked).prop({"checked": false}, this.checked);
}
})
<label for="b0">1</label>
<input id="b0" name="name0" type="checkbox">
<label for="b1">2</label>
<input id="b1" name="name1" type="checkbox">
<label for="b2">3</label>
<input id="b2" name="name2" type="checkbox">
Fiddle

You can enable the checkbox in an else block, like this:
let used_for_contact = $('#b1, #b2');
used_for_contact.click(function() {
if (used_for_contact.filter(':checked').length > 0) {
$("#b0").prop("disabled", true).prop("checked", false);
} else {
$("#b0").prop("disabled", false);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<input id="b0" name="info_for_contact" type="checkbox">
<label for="b0">1</label>
<input id="b1" name="info_for_contact" type="checkbox">
<label for="b1">2</label>
<input id="b2" name="info_for_contact" type="checkbox">
<label for="b2">3</label>
Fiddle

Related

Jquery checkbox checked when i add text value input

How can I toggle a checkbox by using a text input check and check automatically if it exists in the list?
For example :
if you write 222 in the input with id=222 will be checked
if already checked it will be unchecked
if is not found an alert will be shown
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
//if value exsit in the list -> checked
//if value checked -> dechecked
//if value not exist -> alert not exist
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
You can check if your result collection has elements in it by using .length.
$(document).ready(function() {
$('#Scan').on('keypress', function(e) {
if (e.which == 13) {
Scan = $('#Scan').val();
target = $(`#${Scan}`);
if (target.length) {
target.prop('checked', !target.prop('checked'));
} else {
alert("Not found");
}
}
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>
Reference for template literals, just in case.
Here is an example using your conditions specified in question.
My alert is not a true js alert as that will halt any further input changes, so i've created an alert function to show if [name="scan"] input value exists in your checkbox input ids.
See comments in my script...
// create input ids array
let input_ids = [];
// for each checkbox type input id
$('[type="checkbox"]').each(function() {
// get the input id
let input_id = $(this).attr('id');
// add input id to input ids array
input_ids.push(input_id);
});
// on input change in doc for elem [name="scan"]
$(document).on('input', '[name="scan"]', function(e) {
// [name="scan"] current input val
let val = e.target.value;
// if val exist in input ids array
if ($.inArray(val, input_ids) >= 0) {
// get this input by id
let $input = $('#' + e.target.value);
// if input is checked
if ($input.prop('checked')) {
// uncheck input
$input.prop('checked', false);
} else {
// else check input
$input.prop('checked', true);
}
} else {
// run alert
alert(e);
}
// stop propagation
e.stopPropagation();
});
// not found alert
function alert(e) {
// activate alert class
$('.alert').addClass('active');
// time out to hide
setTimeout(function() {
// remove class
$('.alert').removeClass('active');
}, 1000);
}
.alert {
position: fixed;
top: 10px;
right: 10px;
background: red;
padding: .25rem .5rem;
opacity: 0;
transition: all .5s ease;
color: #fff;
}
.alert.active {
opacity: 1
}
<input name="scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus />
<br />
<input class="custom-control-input" type="checkbox" id="111" />
<label for="111" class="custom-control-label">111</label>
<br />
<input class="custom-control-input" type="checkbox" id="222" />
<label for="222" class="custom-control-label">222</label>
<br />
<input class="custom-control-input" type="checkbox" id="333" />
<label for="333" class="custom-control-label">333</label>
<br />
<input class="custom-control-input" type="checkbox" id="444" />
<label for="444" class="custom-control-label">444</label>
<br />
<input class="custom-control-input" type="checkbox" id="555" />
<label for="555" class="custom-control-label">555</label>
<div class="alert">Not found</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I wouldn't use jQuery, but if you insist:
$(function(){
const scan = $('#Scan'), cci = $('.custom-control-input');
let scanVal;
scan.on('input', ()=>{
let scanVal = scan.val(), good;
cci.each((i, n)=>{
if(scanVal === $(n).val()){
n.checked = !n.checked; good = true;
}
});
if(good === undefined && scanVal.length > 2){
alert('Never use Alert');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="Scan" name="Scan" type="text" autocomplete="off" placeholder="Tracking Number" autofocus>
<br/>
<input class="custom-control-input" type="checkbox" id="111" value="111">
<label for="111" class="custom-control-label">111</label>
<br/>
<input class="custom-control-input" type="checkbox" id="222" value="222">
<label for="222" class="custom-control-label">222</label>
<br/>
<input class="custom-control-input" type="checkbox" id="333" value="333">
<label for="333" class="custom-control-label">333</label>
<br/>
<input class="custom-control-input" type="checkbox" id="444" value="444">
<label for="444" class="custom-control-label">444</label>
<br/>
<input class="custom-control-input" type="checkbox" id="555" value="555">
<label for="555" class="custom-control-label">555</label>

get value from checkbox but not the word from checkbox

I have two checkbox and under this when tick one of two checkbox I have two another option checkbox and another tick there will be text. The text will be value from the checkbox, how can I get the value from this checkbox? But the text I want to put are different sentence for each option checkbox selected not the word from checkbox. Did anyone know?
And my another problem is the checkbox not working if I do not tick the first checkbox.
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" /> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" /> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>
Add value attribute to the checkbox. and set value to the checkbox.Or you can take the text from the label
<script type="text/javascript">
function ShowHideDiv(Cat) {
var dvCat = document.getElementById("bigCat");
bigCat.style.display = Cat.checked ? "block" : "none";
console.log(Cat.value)
console.log("Text Inside LABEL:" + Cat.parentNode.textContent )
}
</script>
<label for="Cat">
<input type="checkbox" id="Cat" onclick="ShowHideDiv(this)" value="cat"/> Cat
</label>
<script type="text/javascript">
function ShowHideDiv2(Rabbit) {
var bigRabbit = document.getElementById("bigRabbit");
bigRabbit.style.display = Rabbit.checked ? "block" : "none";
console.log(Rabbit.value)
console.log("Text Inside LABEL:" + Rabbit.parentNode.textContent )
}
</script>
<label for="Rabbit">
<input type="checkbox" id="Rabbit" onclick="ShowHideDiv2(this)" value="Rabbit"/> Rabbit
</label>
<div id="bigCat" style="display: none">
<label>
<input type="checkbox" id="bigSubCat" /> British shorthair
</label>
<label>
<input type="checkbox" id="bigSubCat" /> Exotic Shorthair
</label>
</div>
<div id="bigRabbit" style="display: none">
<label>
<input type="checkbox" id="bigSubRabbit" /> White Rabbit
</label>
<label>
<input type="checkbox" id="bigSubRabbit" /> Black Rabbit
</label>
I think you can follow this simple logic:
https://jsfiddle.net/pablodarde/6p7zkfwf/
HTML
<div class="container">
<div class="row">
<input type="checkbox" value="This is option one!" id="opt1"><label for="opt1">Option One</label>
<p></p>
</div>
<div class="row">
<input type="checkbox" value="This is option two!" id="opt2"><label for="opt2">Option Two</label>
<p></p>
</div>
</div>
JavaScript
const checkboxes = document.querySelectorAll('.container input[type=checkbox]');
for (let i = 0, l = checkboxes.length; i < l; i++) {
checkboxes[i].addEventListener('click', (e) => {
if(checkboxes[i].parentNode.querySelector('p').innerHTML == "") {
checkboxes[i].parentNode.querySelector('p').innerHTML = checkboxes[i].value;
} else {
checkboxes[i].parentNode.querySelector('p').innerHTML = "";
}
});
}
CSS
.row {
padding-bottom: 10px;
border-bottom: 1px solid black;
}

Get value of selected radio button to Firebase

I have a form:
<form onsubmit="return send(this)">
<div>
<input type="radio" id="1" name="check" value="check1" checked="checked">
<input type="radio" id="2" name="check" value="check2">
<input type="radio" id="3" name="check" value="check3">
</div>
</form>
And js:
function send(formObj) {
myFirebase.push({
checked: formObj.check.value
})
}
How do I get the checked input value and pass it into the object key checked ?
var radiochecked = "";
for(i in formObj.check) {
if(formObj.check[i].checked) {
radiochecked = formObj.check[i].value;
}
}
function send(formObj) {
myFirebase.push({
checked: radiochecked
}

How can I get a solution for this?

I have two radio buttons:
yes and
no
When I select 'yes',it should ask "Enter your requirements" and When I select 'no', nothing should happen.
I have tried this:
<form>
<input type="radio" name="question" value="yes">YES
<input type="radio" name="question" value="no">NO
<input type="button" name="submit" value="submit onclick="getValue('question')">
</form>
<script>
function getvalue(question) {
for (var i = 0; i < question.length; i++) {
var button = question[i];
if (button.checked) {
return button;
}
}
print getValue(question)
HTML
<input type="radio" id="radio1" name="radio" value='Yes' /><label for="radio1">Yes</label>
<input type="radio" id="radio2" name="radio" value='No'/><label for="radio2">No</label>
JS
$(function () {
$("input[name='radio']").on("change", function () {
if($("input[name='radio']:checked").val() == "Yes"){
alert("Enter your requirements");
}
});
});
JSFiddle try this

jQuery unchecking checkboxes within a div from a separate specific checkbox

There are two separate divs: check_one & check_two.
check_one has 4 boxes in it, check_two has 1.
If you check the checkbox within the check_two div, it should uncheck all chekced boxes within the first div, check_one. That's sort of confusing, but that is what I'm attempting to do.
HTML ::
<div id="check_one">
<label>Stuff 1</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 2</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 3</label> <input name="" type="checkbox" value="" id="group1" checked="checked"><br>
<label>Stuff 4</label> <input name="" type="checkbox" value="" id="group1" checked="checked">
</div>
<br>
<div id="check_two">
<label>Undo</label> <input name="uncheckMe" type="checkbox" value="" id="group2">
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
jQuery ::
$('input[name=uncheckMe]').change(
{
var checked = $("#group1").attr("checked");
if(checked)
{
$("#check_two").attr("disabled", true);
}
});​
I created a jsFiddle for this http://jsfiddle.net/Twisty/ta2qT/
You're missing a Function within Change():
$('input[name=uncheckMe]').change(function(){
$("#check_one > input").each(function(i) {
if ($(this).is(":checked")) {
$(this).removeAttr("checked");
}
});
});
Try this:
$("input[name='uncheckMe']").change(function(){
if ($(this).is(":checked")){
$("#check_one input").removeAttr("checked");
}
});
And a jsFiddle: http://jsfiddle.net/PgHbu/3/