I want to prevent the button to be click when there are no item selected in the list. Only enable it when at least 1 in the list have highlight class.
HTML
<ul class="list">
<li><input type="checkbox" name="cat[]" id="1" value="227">
<label class="label-list" for="1">Select</label></li>
<li><input type="checkbox" name="cat[]" id="2" value="227">
<label class="label-list" for="2">Select</label></li>
<li><input type="checkbox" name="cat[]" id="3" value="227">
<label class="label-list" for="3">Select</label></li>
<li><input type="checkbox" name="cat[]" id="4" value="227">
<label class="label-list" for="4">Select</label></li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
SCRIPT:
$(".list .label-list").click(function() {
$(this).toggleClass("highlight");
});
CSS:
.highlight {background:red;}
FIDDLE
Tried to use this script but how do I toggle the attr from disabled to enabled?
if( $('.list .label-list').hasClass('highlight') === true )
{
$('#search').addClass('active');
}
You should rather test for is :checked like
var $checkb = $(".list").find("input[type='checkbox']"),
$search = $("#search");
$checkb.on("change", function(){
$search.prop("disabled", !$checkb.is(":checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li>
<label>
<input type="checkbox" name="cat[]" value="224">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="225">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="226">
Select
</label>
</li>
<li>
<label>
<input type="checkbox" name="cat[]" value="227">
Select
</label>
</li>
</ul>
<input type="submit" id="search" class="btn-info" value="search" disabled>
you can simple count all selected checkbox with this jquery selector
$('input[type=checkbox]:checked').length
this returns the total count of the checkbox selected
just add this event listener which occurs every time a checkbox value is change
$(document).on('change', 'input[type=checkbox]', function() {
var disabled = $('input[type=checkbox]:checked').length ? false: true;
$("#search").attr('disabled', disabled);
})
DEMO
Related
Am trying to toggle only clicked element and adding some class to it but it's applying to all.
How can i do that?.any suggestion would be helpful.thank you
$("li").click(function(e){
$(".checkbox span").toggleClass("checked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>
You can use $(this) to get current li clicked and depending on that add your class.
Demo Code:
$("li").click(function(e) {
//cuurent li->span->addclass
$(this).find('span').toggleClass("checked");
});
.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
</ul>
This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle
You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />
I'm trying to solve this issue. I have multiple inputs and I would like to compare if everyone has value == 0 and is also checked.
I don't know how to do it - I spend almost day searching and finding a way how to do it and don't have clue how to go further. I tried to find if one input is checked and has that value.
Thank U for Your help.
$(document).on('change','select, input', function() {
console.log('input/select has been changed');
var $this = $(this);
var $inputValue = $this.val();
console.log('input Value is ' + $inputValue);
if ($inputValue == 0 && $this.is(':checked')) {
console.log('One input is checked and has 0 value');
}
if ('all first inputs are checked and has 0 value') {
console.warn('Could U help me?');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
I'm not completely sure what you want, but I think this can help you
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var inputs = $('input');
var inputsWithValZero = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0);
});
var inputsWithValZeroAndChecked = $(inputs).filter(function (index,elm) {
return ($(elm).val() == 0 && $(elm).is(':checked'));
});
if ($(inputsWithValZero).length == inputsWithValZeroAndChecked.length){
console.log('all checked inputs checked has 0 value');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="destinations">
<ul>
<li>
<label>
<input type="checkbox" name="destination" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="destination" value="3">
</label>
</li>
</ul>
</div>
<div class="languages">
<ul>
<li>
<label>
<input type="radio" name="language" value="0">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="5">
</label>
</li>
<li>
<label>
<input type="radio" name="language" value="3">
</label>
</li>
</ul>
</div>
<div class="rooms">
<ul>
<li>
<label>
<input type="checkbox" name="room" value="0">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="5">
</label>
</li>
<li>
<label>
<input type="checkbox" name="room" value="3">
</label>
</li>
</ul>
</div>
</body>
<script>
$(document).on('change', 'select, input', function () {
console.log('input/select has been changed');
checkInputValue();
});
function checkInputValue() {
var count = 0;
$('input').each(function ( index,value) {
console.log(value);
console.log(index);
if ($(value).val() == 0 && $(value).is(':checked')) {
count = count + 1;
console.log(count+' input is checked and has 0 value');
}
});
console.log($('input').length);
if ($('ul').length == count)
console.log('all first inputs are checked and has 0 value')
}
</script>
I have been having some issues with fetching the value of label for a corresponding checked value. Now i tried with closest attribute but it didnt work and as i dont have tr and cant use it as well. Issue is i am having the checkbox and its value inside a li tag. On click of button i call a function which needs to provide me with the checked values. So i am not sure how will i be able to fetch it. Below is my code and what i have tried.
function test() {
$('.chkName').each(function() {
if ($(this).is(':checked')) {
//How do i fetch the coorresponding val?
}
});
}
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label>test</label>
</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label>test1</label>
</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<label>
<input id="id3" type="checkbox" name="" class="chkName">
<label>test2</label>
</label>
</li>
Before we get to your question there's several issues which should be addressed. Firstly, your HTML is invalid as you have nested <label> elements. I'd suggets you remove the outer one and give the inner a for attribute to relate it to the sibling checkbox. Also, you shouldn't use inline style (or JS). The .listRow elements already have classes, so you can easily place the styles in a stylesheet.
As for the issue, you can use the :checked selector to find only the checked elements. Then, in the each() loop, you can use the this keyword to refer to the current element in the iteration. From there you can use next() to get the sibling label element. Try this:
function test() {
$('.chkName:checked').each(function() {
var $label = $(this).next('label');
console.log($label.text());
});
}
test();
.listRow {
width: 314px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="listRow">
<input id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label for="id1">test</label>
</li>
<li class="listRow">
<input id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label for="id2">test1</label>
</li>
<li class="listRow">
<input id="id3" type="checkbox" name="" class="chkName">
<label for="id3">test2</label>
</li>
</ul>
I would recommend to set a value on the checkbox itself.
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test" id="id1" type="checkbox" name="" checked="checked" class="chkName">
<label>test</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test1" id="id2" type="checkbox" name="" checked="checked" class="chkName">
<label>test1</label>
</li>
<li class="listRow" style=" max-width:314px; min-width:314px;">
<input value="test2" id="id3" type="checkbox" name="" class="chkName">
<label>test2</label>
</li>
JS:
function test()
{
$('.chkName').each(function()
{
if($(this).is(':checked'))
{
//How do i fetch the coorresponding val?
console.log($(this).val())
}
});
}
Otherwise, if you really want the value of the label, use "next":
function test()
{
$('.chkName').each(function()
{
if($(this).is(':checked'))
{
//How do i fetch the coorresponding val?
console.log($(this).next().text())
}
});
}
I am trying to disable the parent checkbox of that group upon selection of radio button. I was able to disable the checkbox of that element upon radio selection. But I also just want to disable the parent checkbox of that group.
Here is the Javascript
$('.taxradio').change(function () {
$('.taxcheck').attr('disabled', false);
$(this).next("input[type='checkbox']").attr({
checked: false,
disabled: true
});
$(this).closest(".leve2check input[type='checkbox']").attr({
checked: false,
disabled: true
});
]
What I want to do is upon radio button check, disable the checkbox of its parent and itself.
Example: If I select D2 radio button disable D2 checkbox and D checkbox.
If I select C1 radio button than disable C1 checkbox and C checkbox.
Jsfiddle: https://jsfiddle.net/voo0m6z7/2/
The selector you're using to find the parent element is wrong.
.closest() is used to find the closest ancestor (parent/grandparent) that matches your selector, which, needs to be an element, not a class.
Since the focused radio is not contained by leve2check, it will return you nothing.
In this case, you need to first find the parent li that contains your radio. For that, i have added a class (level2) to it. And then use .find() to get it's child leve2Check.
See if the code below works the way you want:
$(function() {
$('.rad').change(function() {
var $currLvlChk = $(this).next("input[type='checkbox']");
var $lvl2Chk = $(this).parents('li.level2').find('.leve2check');
$('.chk').attr('disabled', false);
$currLvlChk.attr({
checked: false,
disabled: true
});
$lvl2Chk.attr({
checked: false,
disabled: true
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="lvl1">
<a>
<h4>A</h4>
</a>
<ul>
<!--Level 2-->
<li class="level2">
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk leve2check" />
<label>B</label>
<ul>
<!--Level 3-->
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>B1</label>
</li>
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>B2</label>
</li>
</ul>
</li>
<li class="level2">
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk leve2check" />
<label>C</label>
<ul>
<!--Level 3-->
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>C1</label>
</li>
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>C2</label>
</li>
</ul>
</li>
<li class="level2">
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk leve2check" />
<label>D</label>
<ul>
<!--Level 3-->
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>D1</label>
</li>
<li>
<input type="radio" class="rad" name="primaryradio" />
<input type="checkbox" class="chk" />
<label>D2</label>
</li>
</ul>
</li>
</ul>
</li>