Enabling Submit Button after clicking checkbox - javascript

I have been struggling with getting the following code to work (example taken from jsfiddle after looking at responses in this forum.
Can anyone see where I'm going wrong?
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>

Related

How to hide input fields of a form which are not checked and display only checked ones

I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>

jquery remove parent of parent cur.element

hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }

Enable both submit button on checkbox click

I used two forms in a single page but when I click on checkbox then both submit buttons are active but both are different.
I want to click on form one checkbox then the only form one submit button active and then I click on form two checkbox then the only form two submit button active.
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
You can do that searching relatively for submit button and enabling only the closest one you find:
var checkboxes = $('input[type="checkbox"]');
checkboxes.on('click', function(e) {
$(this).closest('form')
.find('input[type="submit"]')
.prop("disabled", !$(this).is(":checked"));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-0" id="option-0"> <label for="option-0">Option 0</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
The easiest way is to simply find the the submit <input> elements within the same <form> ancestor:
$('input[type=checkbox]').on('change', function(){
$(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});
$('input[type=checkbox]').on('change', function() {
$(this).closest('form').find('input[type=submit]').prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>form one</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
<h1>form two</h1>
<form>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 1</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
Note that, in your HTML, I also corrected the duplicated id of the two <input> elements (and changed the name properties also).

Move input inside label with jQuery

How can I move the input inside the <label> tag, so that it would be <label><input></label> using jQuery. I need to target all the answers within the select-option set.
<div class=”select-option”>
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Your quotes <div class=”select-option”> are incorrect! Use "
Than for the jQuery part:
$("label[for*='[0]_Actual_Answer']").prepend(function(){
return $(this).prev("input");
});
label{background:red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-option">
<div>
<input id="[0]_Actual_Answer_1" name="[0]_Actual_Answer_1" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_1">HELLO WORLD</label>
</div>
<div>
<input id="[0]_Actual_Answer_2" name="[0]_Actual_Answer_2" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_2">HELLO WORLD 2</label>
</div>
<div>
<input id="[0]_Actual_Answer_3" name="[0]_Actual_Answer_3" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_3">HELLO WORLD 3</label>
</div>
<div>
<input id="[0]_Actual_Answer_4" name="[0]_Actual_Answer_4" type="radio" value="IZWE">
<label for="[0]_Actual_Answer_4">HELLO WORLD 4</label>
</div>
</div>
Using prepend(function)
$('.select-option label[for*=Actual_Answer]').prepend(function(){
return $(this).prev("input")
});
If I'm understanding correctly, what you may be after is something like this...
$(document).ready(function() {
$('.select-option input').each(function() { //Get every input in the "select-option" div
var t = $(this);
var l = t.siblings('label'); //Find the closest label
t.detach().appendTo(l);
});
});
JSFiddle

Only apply disabled to one input button

How can I use the 'id' to only apply the disabled/enabled button if a check box is clicked to ONLY the second button, as I need it to toggle on and off depending on if a checkbox is clicked or not. Where as the first button will always be on
http://jsfiddle.net/BPhZe/2122/
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="submit" id="sub1" value="Do thing">
</div>
<div>
<input type="checkbox" name="here" id="option-12"> <label for="option-2">Option 3</label>
</div>
<div>
<input type="checkbox" name="now" id="option-22"> <label for="option-2">Option 4</label>
</div>
<div>
<input type="submit" id="sub2" value="Do thing" disabled="true">
</div>
</form>
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
var checkboxes = $("input[type='checkbox']"),
submitButt2 = $("#sub2");
checkboxes.click(function() {
submitButt2.attr("disabled", !checkboxes.is(":checked"));
});
use id of the second submit button instead of input[type='submit'].
var submitButt = $("#sub2");
FIDDLE DEMO

Categories