Block btn until at least 1 checkbox of an offset is selected - javascript

A little frustrated here, somehow I can't make this work no matter what I try. I have a small form with 2 offsets, each containing a few checkboxes as the following:
<input type="checkbox" id="test1" /><label for="test1">
I need to make sure the user selects at least one of them in each offset in order to be able to click this button, otherwise it should be unclickable :)
<div class="offset6">
<a class="btn btn-warning" href="#openModal">CONTINUAR<span class="btn_caret"></a>
</span></button>
</div>

This should work for you:
//listen for changes to any checkbox so we can re-evaluate the button state
$("input[type='checkbox']").change(function(){
validateInput();
});
//checks to see if the button should be enabled or not
function validateInput(){
//get the count of checked items in each of the offsets
var offset3Count = $(".offset3").find("input[type='checkbox']:checked").length;
var offset8Count = $(".offset8").find("input[type='checkbox']:checked").length;
//set the disabled state of the button based on the offset counts
$(".btn").prop("disabled", offset3Count == 0 || offset8Count == 0);
}
//call the function on page load to ensure the button is initially disabled
validateInput();
Here is a working example (I had to change your HTML a bit as it was invalid)
If you need a specific .btn, as in the one in offset6, then use this line instead:
$(".offset6 .btn").prop("disabled", offset3Count == 0 || offset8Count == 0);
Here is the example
A quick recommendation: If you have unique elements then consider using an id attribute for them. For example:
<button id="btn6" ...>
With the following JQuery selector:
$("#btn6")...

Try
var chk = $(".offset3,.offset8").find('input[type="checkbox"]'); //cache your selector
chk.change(function () {
$('div.offset6 a.btn.btn-warning[href="#openModal"]').prop('disabled', chk.filter(':checked').length);
});
chk.filter(':checked').length get length of checked checboxes
$('.btn').prop('disabled', $('input[type="checkbox"]:checked').length);
Updated After OP's Comment
$('div.offset6 a.btn.btn-warning[href="#openModal"]').prop('disabled', $('input[type="checkbox"]:checked').length);
or add and id to than use # id-selector

Related

Show hide/div based on drop down value at page load

I have the following code that I use to hide/show a div using a drop-down. If the Value of the drop-down is 1, I show the div, otherwise I hide it.
var pattern = jQuery('#pattern');
var select = pattern.value;
pattern.change(function () {
if ($(this).val() == '1') {
$('#hours').show();
}
else $('hours').hide();
});
The select drop down retrieves its value from the database using form model binding:
<div class="form-group">
<label for="pattern" class="col-sm-5 control-label">Pattern <span class="required">*</span></label>
<div class="col-sm-6">
{{Form::select('pattern',['0'=> 'Pattern 0','1'=> 'Pattern 1'],null,
['id'=>'pattern','class' => 'select-block-level chzn-select'])}}
</div>
</div>
This select drop-down then hides or shows the following div:
<div id="hours" style="border-radius:15px;border: dotted;" >
<p>Example text</p>
</div>
The problem:
The div won't be hidden if the pattern stored in the database is set to 0. I have to manually select "Pattern 0" from the drop down to change it. I know that is due to the .change() method. But how do I make it hide/show on page load?
Usually in such case I store the anonymous function reference as below:
var checkPattern = function () {
if ($('#pattern').val() == '1') {
$('#hours').show();
}
else $('#hours').hide();
}
It makes the code ready to use in more then one place.
Now your issue could be resolve in a more elegant way:
$(document).ready(function(){
// add event handler
$('#pattern').on('change', checkPattern);
// call to adjust div
checkPattern();
});
Well, if the element "should" be visible by default, you just then have to check condition to "hide it" (you don't have to SHOW an element that is already visible...) :
if(pattern.value != %WHATEVER%) { $('#hours').toggle(); }
Then, to switch display on event or condition or whatever :
pattern.change(function(evt){
$('#hours').toggle();
});
Not sure that your event will work. I'd try something like
$(document).on(..., function(evt){
//behaviour
});
http://api.jquery.com/toggle/
https://learn.jquery.com/events/handling-events/

Show div on checkbox check and hide it when unchecked (even on load because localstorage)

So the page must show a div if a checkbox is checked, and hide it when it is unchecked. But I am using localstorage so it shouldn't hide on load of the page but only when it is unchecked. If it is possible, it should be usable for a lot of checkboxes (37 exactly).
My Code:
HTML:
<div id="mob1-div" class="row hide one">Mobilisern1</div>
<div id="mob2-div" class="row hide-div">Mobilisern2</div>
<div id="mob1" class="targetDiv">Mobiliseren 1<input type="checkbox" class="checkbox chk" value="one" data-ptag="mob1-div" store="checkbox1"/></div>
<div id="mob2" class="targetDiv">Mobiliseren 2<input type="checkbox" class="checkbox" data-ptag="mob2-div" store="checkbox2"/></div>
Javascript:
$(function() {
var boxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < boxes.length; i++) {
var box = boxes[i];
if (box.hasAttribute("store")) {
setupBox(box);
}
}
function setupBox(box) {
var storageId = box.getAttribute("store");
var oldVal = localStorage.getItem(storageId);
console.log(oldVal);
box.checked = oldVal === "true" ? true : false;
box.addEventListener("change", function() {
localStorage.setItem(storageId, this.checked);
});
}
});
$(function(){
$(".chk").on('change',function(){
var self=$(this);
var aData= self.attr("value");
$("."+aData).toggleClass('hide')
});
});
The problem with this code is that when you check the box the div shows, but if you reload the page the box is still checked. Although, the div isn't visible anymore.
Your issue seems to be centered around the fact that your second checkbox did not specify a value attribute (which all checkboxes need to have for them to make any sense).
I made a few adjustments to your code to make it more valid and compact (replaced store with data-store, used a ternary operator instead of if/then, combined the two document.ready functions into one, and changed your for loop to a forEach). These changes aren't part of the issue, but they do allow for your code to be more brief, which aids in troubleshooting.
localStorage doesn't work in the Stack Overflow snippets, but a working version can be seen in this Fiddle.

Hide/Show div based on checkbox selection

I'm building a form that's supposed to hide and show content according to checkbox selections made by the user. No luck so far in identifying where the error in my code is. Any help will be appreciated. Thanks!
function documentFilter(trigger, target) {
$(trigger).change(function () {
if ($(trigger).checked)
$(target).show();
else
$(target).hide();
});
}
documentFilter("triggerDiv", "hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well">
Some hidable content </div>
You were not sending the correct jQuery string to your function.
Change:
documentFilter("triggerDiv", "hideableDiv");
to:
documentFilter("#triggerDiv", "#hideableDiv"); // notice the '#'s to grab ids
It would be more concise to just toggle the hideableDiv whenever the checkbox state changes.
If the checkbox state is always unchecked on load, just hide the div on page load.
If the checkbox state is determined dynamically, then you'd need to check the prop checked state on page load to hide or show the div initially.
function documentFilter(trigger, target) {
$(trigger).on('change', function () {
$(target).toggle();
});
}
documentFilter("#triggerDiv", "#hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well" style="display:none">
Some hidable content </div>
Your selectors aren't the best. I'd do the following:
Hide the div when the page loads using jQuery's .hide()
Listen for the checkbox to be clicked
When the checkbox is clicked, check to see if the current state of the checkbox is checked using this.checked
Based on the current state, either hide() or show()
DEMO: http://jsbin.com/zukobufefe/edit?html,js,output
$("#hideableDiv").hide();
$("input[type=checkbox]").click(function() {
if (this.checked)
{
$("#hideableDiv").show();
}
else
{
$("#hideableDiv").hide();
}
});
Your selectors are bad. If you want to find by id you shoud use # before id
To get checked state use .prop
You can use .toggle(state) to show/hide element according to passed state
Try this:
function documentFilter(trigger, target) {
var $target = $(target);
$(trigger).change(function() {
$target.toggle(this.checked);
});
}
documentFilter("#triggerDiv", "#hideableDiv");

JSON parse of string from cookie and ticking boxes doesn't tick boxes

I am writing a client side script to clean up the system that my college uses, and I am having an issue with a personal completion feature. What I have is an add-on that injects a <script> element into the DOM, and in this way I can modify the UI. However, I've run into an issue.
I have added some checkboxes to 'UnitBlocks' that allows me to check units that I have completed but the college hasn't uploaded yet. These trigger a JQuery event that allows me to tick the boxes and then change the color of the UnitBlock to yellow (see below for code):
var pc = false;
$(this).find('#personalCompletion').click(function(){ // personal completion is the checkboxId
if (pc === false)
{
$(this).closest('a').css('background-color', '#FFCC45 !important');
$(this).closest('a').children('p').text('Done');
pc = true;
}
else
{
$(this).closest('a').css('background-color', '');
$(this).closest('a').children('p').text('In Progress');
pc = false;
}
$(this).closest('p').append(' <input type="checkbox" id="personalCompletion"></input>'); //this re appends the checkbox
});
This works fine and it allows me to tick/untick the box. However, when I reload the page they dissapear, so I decided to store a cookie using JS with the tickbox values stored as "302": "yes", "304": "no", "313": "yes". The numbers are the unit numbers and the yes/no is if the boxes are ticked or not (this cookie is manual and for testing purposes). My code then goes onto pull the cookie for each UnitBlock, and dependant on the yes/no value of the cookie, it sets the tick box (please see below for my code)
var cookieValues = getCookie('completedUnits');
for (var i = 0; i <= cookieValues.length; i++)
{
if (cookieValues[i].includes($(this).attr('data-modcode'))) //data-modcode is a custom attribute with the unit number in (302 etc.)
{
if (cookieValues[i].text().indexOf('yes') >= 0) //if it includes the word 'yes'
{
$(this).find('#personalCompletion').attr('checked');
}
}
}
This doesn't throw an error or anything, it just doesn't tick any boxes...
You should use the .prop() method to change checked property (just like selected and disabled properties, too) representing and changing state of form elements.
There's big difference between checked property and checked attribute: the attribute represents defaultChecked property value, which is just initial state of the input, while the checked property changes state of the checkbox.
$(function() {
var $checkbox = $('#checkbox');
$('.debug').text($('.debug').text() + '\n' +
$checkbox.attr('checked') + '\n' +
$checkbox.prop('checked'));
$('#button').on('click', function() {
$checkbox.prop('checked', !$checkbox.prop('checked'));
$('.debug').text($('.debug').text() + '\n' +
$checkbox.prop('checked'));
});
});
.debug {
white-space: pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox" checked/>
<input type="button" id="button" value="click me!" />
<div class="debug"></div>

plus minus button with specific parent input doesn't work

as you can see here jsfiddle.net/TTU4Z/1/
The jquery code in question is below and if i run it without all my code (like in jsfiddle) it run perfectly. but with all my code doesn't run.
$(document).ready(function() {
// This button will increment the value
$('.plus').click(function(e){
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If is not undefined
if (!isNaN(currentVal)) {
// Increment
$('input[id='+fieldName+']').val(currentVal + 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
});
// This button will decrement the value till 1
$(".minus").click(function(e) {
// Stop acting like a button
e.preventDefault();
// Get the field name
fieldName = $(this).attr('field');
// Get its current value
var currentVal = parseInt($('input[id='+fieldName+']').val());
// If it isn't undefined or its greater than 0
if (!isNaN(currentVal) && currentVal > 0) {
// Decrement one
$('input[id='+fieldName+']').val(currentVal - 1);
} else {
// Otherwise put a 0 there
$('input[id='+fieldName+']').val(0);
}
});
});
Clicking on "add" button all is good, but when you click in one of minus or plus button it delete all.
It should increase or decrease the val of the relative input as you can see, but nothing change if i try to edit everything in those functions.
What to do?
Since you are appending elements dynamically you have to use event delegation in this situation. Actually the registered events are not invoking in your context, that's why the buttons are exhibiting their original behavior.
Try,
$(document).on('click','.plus',function(e){
and
$(document).on('click','.minus',function(e){
Additionally, the selector that you are framing dynamically contains some meta-characters, just pass that as a string or you have to escape it, in order to make your code work properly.
DEMO
New Demo after fixing your concatenation issues. And in that demo, i just removed the attribute selectors like [id='blah'] and replaced that with $('#blah').
DEMO - I
See updated fiddle http://jsfiddle.net/LfNmh/
You had your x variable inside the code string where it should have been in the code. line 15 ..
var numPortata = '<td><button class="minus" field="portata'+x+'">-</button><input id="portata'+x+'" type="number" name="numPortata[]" value="1" size="10" min="1" max="10" step="1" required><button class="plus" field="portata'+x+'">+</button></td>';
I also changed the code so that the events are attached at the document level as Rajaprabhu said.

Categories

Resources