I'm using Fuelux Checkbox component and I'm trying to toggle some DIV based on checkbox checked. I'm doing as follow:
$(document).ready(function(){
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").toggle(!this.checked);
$("#rifSucursal").toggle(this.checked);
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").toggle(!this.checked);
});
});
But is not working since #rifEmpresa is always show no matter what checkbox is checked or not. Te right way should be:
Check the first visible checkbox "Click me"
Hide #rifEmpresa DIV and show #rifSucursal right now that is show but the first is not hide
Toggle #rifEmpresa on RIF? checkbox checked
This is the related HTML code:
<form enctype="multipart/form-data" id="registroEmpresa" role="form" class="form-horizontal" method="POST">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div id="chkSucursal" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>Check me</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="sucursal" name="sucursal" value="1" class="sr-only">
</label>
</div>
</div>
</div>
<div style="display: none;" id="rifSucursal" class="form-group">
<div class="row">
<label class="col-sm-4 control-label">Find company<span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Show</div>
</div>
<div class="row">
<div id="chkRif" data-initialize="checkbox" class="checkbox highlight">
<div class="col-xs-4 control-label"><strong>RIF?</strong>
</div>
<div class="col-md-6 col-sm-4 checkbox">
<label class="checkbox-custom">
<input type="checkbox" id="chkRif" name="chkRif" value="1" class="sr-only"> <span class="checkbox-label">(check me to show "Some Form Element to HIDE")</span>
</label>
</div>
</div>
</div>
</div>
<div id="rifEmpresa" class="form-group has-feedback">
<label class="col-xs-4 control-label">RIF <span class="text-danger">(*)</span>
</label>
<div class="col-md-6 col-sm-4">Some FORM element to Hide</div>
</div>
</div>
</div>
</form>
Can any give me some help and tell me what I'm doing wrong and how to fix my code? Here is a simple Fiddle for testing purposes
try this
http://jsfiddle.net/31roa5hz/2/
$(document).ready(function(){
$('html').addClass('fuelux');
$('#chkSucursal').on('checked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").hide('slow');
$("#rifSucursal").show('slow');
});
$('#chkSucursal').on('unchecked.fu.checkbox', function (evt, item) {
$("#rifEmpresa").show('slow');
$("#rifSucursal").hide('slow');
});
$('#chkRif').on('checked.fu.checkbox', function () {
$("#rifEmpresa").show('slow');
});
$('#chkRif').on('unchecked.fu.checkbox', function () {
$("#rifEmpresa").hide('slow');
});
});
I think the control you're using doesn't have any property as checked, i tried to know if that element is checked or not using .is(':checked') it returns undefined. so i think the updated code is better for you as the UI control you're using has its own custom events which can be captured.
You should be able to do this:
$('input').on('change', checkboxChanged);
Like a normal checkbox. If you can't, it's a bug and you may want to try checking out/bower install #master, since we have been bugfixing the checkbox control over the past two weeks.
I do know that the checked attribute was not getting set in Fuel UX 3.4.0.
Related
I have the following code:
JavaScript:
jQuery(".cbChild").on("change", function () {
//go to parent checkbox to see if it's check. If not, check it.
var parentElement = jQuery(this).closest('cbParentContainer');
//I've also tried
//var parentElement = jQuery(this).parentsUntil('cbParentContainer');
//And
//var parentElement = jQuery(this).parentsUntil('row');
if (jQuery(this).find('input[type=checkbox]').prop("checked")) {
parentElement.prop("checked", true);
}
});
HTML:
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
When one of the child checkboxes (class='cbChild') gets checked, I want to force the parent (class='cbParent') checkbox to also be checked. However, I'm unable to access the parent for some reason. The call to parentElement.prop("checked", true) fails because parentElement isn't the parent checkbox. To further clarify the issue, there are multiple cbEventsConainers with more parent/child checkboxes. I only included one for this post.
We are not dealing with a child-parent relationship here but the following will check the "parent" checkbox when at least one of the children is checked and will uncheck it otherwise.
$(function(){
$("body").on("change",".cbChild input",function(){
var cc=$(this).closest(".cbChildContainer"),p=cc.prev("div").find(".cbParent input");
p.prop("checked",$(".cbChild input:checked",cc).length>0);
});
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="cbEventsContainer">
<div class="row">
<span class="col-sm-4 cbParent"><input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_ctl00">Connect with Digital Services</label>
</span>
</div>
<div class="cbChildContainer">
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl00$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl00_ctl00">Event 1</label>
</span>
</div>
<div class="row">
<div class="col-xs-1">
</div>
<span class="checkbox col-sm-11 cbChild">
<input name="p$lt$ctl03$pageplaceholder$p$lt$ctl01$VirtualTourEventRegistration$rptEventList$ctl03$rptEventRegistrationDetails$ctl01$ctl00" id="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00" type="checkbox">
<label for="p_lt_ctl03_pageplaceholder_p_lt_ctl01_VirtualTourEventRegistration_rptEventList_ctl03_rptEventRegistrationDetails_ctl01_ctl00">Event 2</label>
</span>
</div>
</div>
So I am trying to do an that If the College is selected in the checkbox then the college course would show like
BS-IT,
BS-IT-DA,
BS-CS
in the drop-down
else if the senior high is check then the strand would show
GAS,
IT,
CS.
I don't know if it is required with the JavaScript or
J-Query
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<label><input type="checkbox">College Student</label>
<label><input type="checkbox" class="senior-high" >Senior High</label>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
</div>
//first add id="collage" on collage checkbox and add class="checkbox" on all checkbox add senior_highcheckbox id on senior hs checkbox
$(document).on('click','.checkbox'function(){
if($('#college').is('checked')){
$('#course').append(`<option>BS-IT </option>
<option>BS-IT-DA</option>
<option>BS-CS</option>`);
$('#senior_highcheckbox').attr('checked',false);
}else{
$('#course').append(`<option>GAS</option>
<option>IT</option>
<option>CS</option>`);
$('#college').attr('checked',false);
}
})
I've amended your HTML slightly so I can find the ID with jQuery. What you want to do is to listen out for the checkbox with Jquery and then check its ID attribute. If the attribute is equal to 'college' then append the first list of items. Otherwise it must be the other checkbox so append the others.
$(':checkbox').click(function() {
if ($(this).attr('id') === 'college') {
$('#Course').append($('<option></option>').html('BS-IT'), $('<option></option>').html('BS-IT-DA'), $('<option></option>').html('BS-CS'));
} else {
$('#Course').append($('<option></option>').html('GAS'), $('<option></option>').html('IT'), $('<option></option>').html('CS'));
}
$(':checkbox').attr("disabled", true);
});
$('#cancel').click(function() {
$(':checkbox').prop("checked", false);
$(':checkbox').attr("disabled", false);
$('#Course').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group right">
<label class="label-title">Status</label>
<div>
<input type="checkbox" id="college" name="college">
<label for="college">College Student</label>
<input type="checkbox" id="senior-high" name="senior-high">
<label for="senior-high">Senior High</label>
</div>
</div>
</div>
<div class="horizontal-group">
<div class="form-group left">
<label for="">Course</label>
<select id="Course"></select>
</div>
<button id="cancel">Cancel</button>
</div>
I have a form in my page and there I have checkboxes.
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">
<label for="tour">Tour</label>
</div>
I use this checkbox in both on the page and the bootstrap modal in small devices.
<div class='col-sm-5 col-md-4 col-lg-3 hidden-xs'>
<%= render 'search_filters' %>
</div>
..
<div class="modal-content modal-main-index">
<%= render 'search_filters' %>
</div>
..
Ofcourse because of this, I have 2 checkboxes with the same id. So one of them can not be clicked. What is the best way to solve this. (I do not want to fill modal on button click with js return)
Ofcourse because of this, I have 2 checkboxes with the same id. So one
of them can not be clicked. What is the best way to solve this.
Use class instead of id
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" class="tour" value="Tour">
<label for="tour">Tour</label>
</div>
On the html label tag
Tip: A label can be bound to an element either by using the "for" attribute, or by placing the element inside the element.
Thus, if you have an html page like this
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
<div class="col-xs-6 p-l-0">
<label>
<input type="checkbox" name="q[group_name_eq_any][]" value="Tour"> Tour
</label>
</div>
</body>
</html>
both of those check boxes are selectable by clicking on the text. Whereas
<!DOCTYPE html>
<html>
<body>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
<div class="col-xs-6 p-l-0">
<input type="checkbox" name="q[group_name_eq_any][]" id="tour" value="Tour">_
<label for="tour">Tour</label>
</div>
</body>
</html>
will only ever toggle one of them (the top one in my case).
How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?
I have this following form
<form action="" class="form-horizontal">
<div id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
<div>Add Row</div>
</div>
The question is when user clicks Add Row button, I need to create a copy of this form elements inside
<div id="wrapper">
How can i do that?
EDIT: SOLVED
<form action="" class="form-horizontal" id="wrapper">
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label"><?=$core->l("default_comm_type");?></label>
<div class="controls">
<select id="fld_default_comm_type" name="fld_default_comm_type[]" defaultValue="-1" class="m-wrap span10" field="fld_default_comm_type" appEditor="true">
<?=combo_creator::render_default_comm_types()?>
</select>
</div>
</div>
</div>
<div class="span4 checkerAlign">
<div class="control-group">
<div class="controls">
<?=$core->l("is_active");?>
</div>
</div>
</div>
<div class="span2 checkerAlign"><input type="checkbox" name="fld_active[]" id="fld_active" editType="booleanEdit" appEditor="true"/></div>
</div>
add
</form>
In the Js part:
jQuery("#addMore").click(function(){
var contents = jQuery("form").html();
jQuery("#wrapper").append(contents);
});
When add is clicked it inserts form elements just as I wanted
and when delete is clicked it deletes elements. Thank you for the tips guys
Problem solved! Thanks guys.
I think you need to duplicate the contents of (row-fluid), not the whole (Wrapper) contents, this should let you add more rows of your original form template when clicking on AddMore link.
This is an edit to the suggested solution by #user2389688:
$("#addMore").click(function(){
$(".row-fluid:last").clone().appendTo(".wrapper");
});
JsFiddle Link:
http://jsfiddle.net/tCY8v/1/
Something like this ?
$("#addMore").click(function(){
var contents = $("form").html();
$("#wrapper").append(contents);
});
http://jsfiddle.net/tCY8v/
If I did understand your question correctly.
For example:
$('#addMore').click(function() {
$('.row-fluid').eq(0).clone().insertBefore(this);
});