We Keep Coding

Conditional field jQuery library not working with Checkbox

I am using a small jQuery library jQuery-Visibly
A jQuery Plugin designed to easily Conditionally show elements based on values of other Form elements.
Project page and documentation: http://www.danielrivers.com/visibly
Project GitHub Page: https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js
Some key features that put it above some other libraries:
Multiple fields and values can be set as a rule for revealing a hidden field instead of only a single field to field rule like other libraries do. Example; To show field 3 I can require both field 1 and field 2 to have a certain value set in both at the same time in order for field 3 to become visibble.
RegEx matching - require a text inputs text value to match the regex pattern in order for a conditional field reliant on it to be shown.
Below is my demo where I am trying to use checkboxes to reveal a hidden DIV.
In DIV ID #test I have a conditional rule set with visibly="foo:checked;foo3:checked"
This means field #foo and #foo3 should both be checked in order to reveal #test
However it is not working. It is possibble that the library only supports select and input fields and not checkbox fields but looking at the library code (125 lines) https://github.com/DanielRivers/jQuery-Visibly/blob/master/js/jquery-visibly.js on line 60 mI saw :checked which made me think it is supported but I am not 100% certain of it?
Could someone look at this to see if checkboxes should work with what I am doing?
DEMO: https://jsfiddle.net/955us4ge/
HTML
<label for="foo">
<input id="foo" name="foo" type="checkbox"> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox"> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox"> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
this should be hidden until checkbox #foo and #foo3 are both checked
</div>
JS
$(document).ready(function() {
$('#test').Visibly();
});

The Visibly plugin seems to check the value attribute of the elements that you added to the rules and checks if the value meets the condition. So if you want it to work with checkbox elements you will need to change the value attribute on them.
Here is an example.
$('#test').Visibly();
$("input").on("click", function() {
if($(this).prop("checked")) {
$(this).val("checked");
} else {
$(this).val("");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/DanielRivers/jQuery-Visibly/master/js/jquery-visibly.js"></script>
<label for="foo">
<input id="foo" name="foo" type="checkbox" value=""> Foo
</label>
<label for="foo2">
<input id="foo2" name="foo2" type="checkbox" value=""> Foo2
</label>
<label for="foo3">
<input id="foo3" name="foo3" type="checkbox" value=""> Foo3
</label>
<div id="test" class="conditional" visibly="foo:checked;foo3:checked">
This should be hidden until checkbox #foo and #foo3 are both checked
</div>

In case you'd like to do this with plain jQuery:
https://jsfiddle.net/rjmu8dus/
$(document).ready(function() {
$("input[type=checkbox]").on('change',function(){
if( $("#foo").prop('checked') == true && $("#foo3").prop('checked') == true) {
$("#test").show();
}
});
});
Something you might add is create an else that says if they are not clicked to not show them.

How to add uncheck to last element in ngRepeat Check-Boxex using Angular js?

I am using Check-box model as seen here http://vitalets.github.io/checklist-model/ for check boxes with Angularjs. Some of the Check-boxes need the last check-box element to uncheck all the others. How would I add a ngClick attribute to the last element in a set of Checkboxes using the check-box-model module.

Try Below Solution:
Working Demo
<label ng-repeat="role in roles">
<input ng-click="$last&&mytest()" type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Click on last check box "admin" and it will be alert box

Well I don't know much about checklist-model but you can add ngClick to the last element like this:
<label ng-click={{$last && yourFunction || ''}} ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>
Though, It will add ng-click attribute to all elements but this can work for you. Its an alternative.

How to find specific ID with Jquery and perform action

I have 2 styles radio buttons with Enable / Disable, please check below..
<p class="switch-options">
<label class="cb-enable selected" data-id="company_slogan_check">
<span>Enable</span>
</label>
<label class="cb-disable" data-id="company_slogan_check">
<span>Disable</span>
</label>
<input id="company_slogan_check" class="checkbox" type="hidden" value="0" name="company_slogan_check">
<input id="company_slogan_check" class="checkbox main_checkbox" type="checkbox" value="1" name="company_slogan_check" checked="checked">
</p>
and I want to check if the "Enable" button is clicked I want to hide some DIV within the code. I am trying with the following code but nothing works..
jQuery('#company_slogan_check').click(function() {
alert('sssss');
});
it doesnt even respond to the click.. can someone please help..

data-id is not the same as an id, to which the css selector #something would apply to id="something".
It would be easier to use .switch-options input

thanks guys, I did another workaround.. cheers
if($(this).attr('data-id') == "company_slogan_check")
alert('clicked');

first of all ID's need to be unique as already mentioned..
second your not using radio buttons u use a checkbox..
and way not try the ":checked" ?
something like this:
$("#company_slogan_check").change(function(){
if($(this).is(':checked')){
// your function
}
});
hope this was helpful

How to work with checkboxes generated from ezMark?

I'm using ezMark library in my website alongwith PHP, Smarty, jQuery, etc. Here on one of the webpages I want to disable few checkboxes depending on some condition. After that there is one parent check box, upon selection of which all the checkboxes which are not disabled should get checked and should work vice-versa on deselcting the parent check box. Also after checking the parent checkbox if I uncheck any one of the selected checkboxes(which are not disabled) the parent checkbox should also get unchecked. I tried alot to achieve this by regular code of checking and uncheking the checkboxes (.attr('checked','checked') and .removeAttr('checked'); respectively) but doesn't work in this situation due to ezMark library. Now I'm using following code to check and uncheck the checkboxes as follows:
Code for parent check box:
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
The smarty code for multiple checkboxes creation:
{section name=tests loop=$all_tests}
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="" {if $all_tests[tests].is_test_lock!=1 && $all_tests[tests].test_assign_to_package=='no'} {else} disabled {/if}>
<label>{$all_tests[tests].test_name}</label>
</p>
{/section}
The jQuery code for selecting and deselectiong the checkboxes upon parent checkbox:
$(document).ready(function() {
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
});
When I look into Firbug Element Inspector I'm getting the different HTML created for the child checkboxes as follows:
<p class="custom-form">
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check checkBoxClass ez-hide" type="checkbox" name=""></input></div>
<label>N1P: Gravitation</label>
</p>
I'm not getting from where this <div> tag is coming. So in order to check and uncheck all the child checkboxes on selection of paren checkbox I'd written above logic. The normal logic is not getting worked due to this div tag and ezMark library. With the current code all the child checkboxes are getting selected including the disabled ones upon selecting the parent checkbox and upon unchecking the parent checkbox all the child checkboxes get unselected. Can you help by showing how to achieve the required functionality of selection and deselection of child checkboxes in this scenario? Thanks in advance.

The jQuery.ezMark generated structure is not really a problem to achieve what you want to. I wrote this jsFiddle to show you a way to proceed based on css classes to identify parent (.l0) and children (.l1).
I manually disabled some checkboxes for sample, but you can use your condition to disabled them.
Hope this can help you ;)

stop label from toggling the input checkbox

I have the following html code. When clicking on the label it toggles the checkbox.
<td><label for="startClientFromWebEnabled">Client Launch From Web:</label></td>
<td><input type="checkbox" id="startClientFromWebEnabled" name="startClientFromWebEnabled" data-bind="checked: StartClientFromWebEnabled, enable: IsEditable" onchange="startClientFromWebToggleRequiredAttribute()" /></td>
How can I prevent this? If I remove the for="startClientFromWebEnabled", It stops toggling but I need this because I have some logic that takes the id from the element that fires the event ...

The best solution would be to let label toggle the checkbox as that is intuitive and expected behaviour.
Second best solution is to make sure your checkbox is not nested inside label and label does not have for attribute. If you have some logic that depends on it, you can put data attributes on elements and use those in your logic.
<input type="checkbox" data-myid="1" />
<label data-myid="1">foo</label>
Last resort
You could prevent the default behaviour of the click event using jQuery:
$('label[for="startClientFromWebEnabled"]').click(function(e) {
e.preventDefault();
});​
Please see this jsFiddle for an example.

There is CSS solution too:
label {
pointer-events: none;
cursor: default;
}

if you are using JQuery, add an id on your label then
add this in your script:
$("#lbl").click(function(){
return false;
});

Just prevent default on label or any part of label, if desired.
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label class="prevent-default" for="1">foo</label>
or
document.querySelector('.prevent-default').addEventListener('click', (e)=>{
e.preventDefault();
}, false);
<input type="checkbox" id="1" />
<label for="1">foo some part <span class="prevent-default">not</span> clickable</label>

"I have some logic that takes the id from the element "
You could remove the for-attribute, if you store the ID somewhere else. For example in a data-*-attribute:
<label data-input-id="startClientFromWebEnabled">
On the other hand, it is sometimes difficult to point and click an a check-box based on the styling and the capabilities of the user. There is are good reasons for using the for-attribute.