If a user checked on the checkbox then the button should be enabled. If not then button should be disabled.
function test(){
if($(this).val() === true){ //not working
$('#send_button').prop('disabled', false);
}
else if($(this).val() === false){
$('#send_button').prop('disabled', true);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input id="ischeck" type="checkbox" name="ischeck" value=true>
<label for="ischeck">ischeck</label><br>
<button id="send_button" class="btn btn-primary pull-right" onclick="test()">Send</button>
You should add an event listener on the input checkbox dom element in order to catch the value change like this (check the documentation here):
$("#ischeck").change(...);
Then, check which value the input has, and set the button disabled property accordingly:
$('#send_button').prop('disabled', !this.checked);
Note: Do not forget for the case of checkbox input type, in order to set the initial value, you should use the property checked like this (more info here):
<input id="ischeck" type="checkbox" name="ischeck" checked=true>
Follows a full working example:
$("#ischeck").change(function () {
// You want to se the property disable of the send button with the oposite value of the input;
// Example: Input: true [then] Button disabled: false
$('#send_button').prop('disabled', !this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input id="ischeck" type="checkbox" name="ischeck" checked=true>
<label for="ischeck">ischeck</label><br>
<button id="send_button" class="btn btn-primary pull-right" onclick="test()">Send</button>
Related
I've been trying a couple of ways to disable checkboxes in a Django ModelForm. Using Jquery I was able to write some code that does disable checkboxes when a certain number is checked, but it also disables the ones that have been checked. I want a dynamic way to check and uncheck boxes and only block boxes that have not been checked when the limit is hit.
This is my JS:
function checkBoxes() {
$(' input[type=checkbox]').
attr('disabled', true);
$(document).on('click',
'input[type=checkbox]',
function (event) {
if ($(this).is(":checked")) {
console.log("1")
} else {
console.log('2')
}
});
}
The issue I'm having trying to figure this out is how to verify if the box has been checked or not because of how I'm creating the checkbox list with Django:
<div style="height:30px"></div>
<form method="post">
{% csrf_token %}
{{ context.form.as_p }}
<button type="submit">Submit</button>
</form>
How can I fix my JS and be able to enable and disable checkboxes dynamically, meaning when the limit is hit, disable all the unchecked boxes, and when the limit is reduced allow checkboxes to be clicked again?
Just use
:checked and :not(:checked) in your jquery selector, like this:
$(document).on('click', 'input[type=checkbox]', function(event) {
if ($('.checkbox-container input[type=checkbox]:checked').length >= 3) {
$('.checkbox-container input[type=checkbox]:not(:checked)').attr('disabled', true);
} else($('.checkbox-container input[type=checkbox]').attr('disabled', false));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="checkbox-container">
<input type="checkbox" id="scales1" name="scales1" checked>
<input type="checkbox" id="scales2" name="scales2" checked>
<input type="checkbox" id="scales3" name="scales3">
<input type="checkbox" id="horns1" name="horns1">
<input type="checkbox" id="horns2" name="horns2">
<input type="checkbox" id="horns3" name="horns3">
</div>
</body>
</html>
I have a form with checkboxes, along with a hidden select all button inside the form. I use jQuery to listen for a button click outside the form, and then "click" the hidden button element to select all. Sometimes the page loads up and I click the button and it works perfectly. You can click it multiple times and they all check and uncheck as intended. The form submits perfectly.
Other times, however, the page will load up and I click the button and nothing happens. They don't check no matter how many times I click. I've found this happens a lot if the page sits for more than maybe 10 seconds without me doing anything. But it also can happen on page load. I can't understand why. Is there an error in my code somewhere that I'm just not seeing?
$(document).ready(function(){
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
$('label.choice').toggleClass("choice-text-color");
});
} else {
$(':checkbox').each(function() {
this.checked = false;
$('label.choice').toggleClass("choice-text-color");
});
}
});
$("#selectAll").click(function() {
$('#select-all').click()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0"
type="button" name="selectAll">Select All</button>
<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
(....etc.....)
<input type="checkbox" id="select-all" style="display: none;">
<input type="submit" style="display: none;">
</form>
It seems to me that your issue is due to the extraneous markup you've added to facilitate the select all functionality and the JavaScript/JQuery tied to it.
All you need is a single button (it doesn't matter whether it's part of the form or not) to trigger the select/deselect operations. Also, since the button will not be transmitting any data as part of the form the name attribute should not be used.
Also, if you don't want users to see the form's submit button, then simply don't add one to the form. You can then programmatically submit the form with $(form).submit().
// Passing a function into JQuery is the same as document.ready
$(function(){
// JQuery recommends the use of "on" to bind events
$('#selectAll').on("click", function(event) {
$(':checkbox').each(function() {
this.checked = true;
});
$('label.choice').addClass("choice-text-color"); // Update the class use
});
});
.choice-text-color {
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0" type="button">Select All</button>
<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
</form>
I have one input date field and one button, I want to make the button enable when there is value in input date field. How to make in JavaScript or jQuery
check if input has value using val(). hope this helps
function check(val)
{
var btn = $('.submit')
if(val)
{
btn.removeAttr("disabled");
}
else
btn.attr("disabled", "disabled");
}
$('.date').change(function(e){ // change button disabled property if user provides input
check($(this).val());
})
check($('.date').val()); // Function to check input has value
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<input class="date" type="date">
<button class="submit">Submit</button>
You can use jquery function .on()
$(document).ready(function(){
$("input[name='date']").on("change", function(){
if($(this).val() != "")
$("input[name='submit']").removeAttr("disabled");
else
$("input[name='submit']").attr("disabled", "disabled");
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input type="text" name="date" />
<input type="button" name="submit" disabled="disabled" value="submit"/>
</form>
here I initially set attribute disabled then remove it once there's input and it's not empty input. If it's empty, I re-add that attribute.
I have a button and checkbox(terms of use) in my page.
The button should be disabled if the checkbox is not checked.
I want to reset the situation in every load. (first load or using back btn or etc) the reset state is: checkbox shouldn't be checked, and btn is disabled.
But the function is called just when I click the checkbox, and not at load time.
Update: Also I tested .trigger('change'), too. It did't work too
$(function() {
$('#termsOfUse').removeAttr('checked');
$('#termsOfUse').change();
$('#termsOfUse').change(function() {
if ($(this).is(":checked")) {
$('#createBtn').prop('disabled', false);
} else {
$('#createBtn').prop('disabled', true);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<input id="termsOfUse" type="checkbox" />
<label for="termsOfUse" style="display: inline;">
<span>rules</span> I am agree with</label>
</div>
<div class="create">
<input id="createBtn" type="button" value="create" class="btn btn-default btn-success"
onclick="location.href = '#Url.Action("Create","NewOne ")'" />
</div>
You are calling the .change before you assign.
$(function() {
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
});
You can also put
<script>
$('#termsOfUse').prop('checked',false);
$('#termsOfUse').change(function() {
$('#createBtn').prop('disabled', !this.checked);
}).change(); // execute at load
</script>
</body>
at the end of your document
I'm trying to save the .addClass every time I save a stylesheet so that the button remembers
The user can toggle the option on/off.
My simple html:
<div id="btn-switch" class="btn-group" data-toggle="buttons">
<button class="btn btn-default" type="radio" name="options" id="option1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off">off</button>
<button class="btn btn-default" type="radio" name="options" id="option2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off">on</button>
</div>
This is my code:
<script>
$(document).ready(function() {
if ($.cookie("css")) {
$("#bg").attr("href", $.cookie("css"));
}
$("#btn-switch button").click(function() {
$("#bg").attr("href", $(this).attr('data-color'));
$("#btn-switch .active").removeClass("active");
$(this).addClass("active");
$.cookie("css", $(this).attr('data-color'), {
expires: 365,
path: '/'
});
return false;
});
});
</script>
How can use the same cookie to save the .active class?
I would also use local storage for all of this but I dont know how to even start the code snippet I achieved above
Here is a way to use localstorage:
Given this markup (I am using input type="radio" for this example):
<div class="btn-group" data-toggle="buttons" id="btn-switch">
<label class="btn btn-default">
<input type="radio" id="option1" name="options" value="1" data-color="{T_THEME_PATH}/normal.css" autocomplete="off"> off
</label>
<label class="btn btn-default">
<input type="radio" id="option2" name="options" value="2" data-color="{T_THEME_PATH}/inverse.css" autocomplete="off"> on
</label>
</div>
<br><br>
<a id="bg" href="{T_THEME_PATH}/normal.css">Background</a>
In the script, listen for the change event on the radio buttons. This is fired for any radio that is checked. First set the #bg href to the clicked radio's color data-attribute (Use jQuery .data()). Then store this href to localstorage. Additionally store the ID of the clicked option to localstorage. Then on subsequent page loads use the items in localstorage to set the correct href and activate the correct radio button:
$(document).ready(function() {
var csshref = localStorage["css"];
if (csshref) {
$("#bg").prop("href", csshref);
}
var activeid = localStorage["activeid"];
if (activeid) {
$("#" + activeid).prop("checked", true).closest("label").addClass("active");
}
$('#btn-switch [type="radio"]').on("change", function() {
$("#bg").attr("href", $(this).data('color'));
localStorage.setItem('css', $(this).data('color'));
localStorage.setItem('activeid', $(this).prop('id'));
return false;
});
});
Here is a DEMO
In the demo, try checking on and off and then hittin RUN again. You will see that subsequent runs remember which item was checked and set the href appropriately.
Here is a simple way to do it:
$(document).ready(function () {
//on page load check for cookie value and add active class
if($.cookie("isButtonActive") == 1)
{
$("#btn-switch button").addClass("active");
}
$("#btn-switch button").click(function() {
//your previous code here
if($("#btn-swtich button").hasClass("active") == true)
{
//button was active, de-activate it and update cookie
$.("#btn-switch button").removeClass("active");
$.cookie("isButtonActive", "0");
}
else
{
//button is not active. add active class and update cookie.
$.("#btn-switch button").addClass("active");
$.cookie("isButtonActive", "1");
}
});
});