Develop Reference

How to show/hide <div> when <mat-checkbox> is checked/unchecked?

I'd like to show/hide a <div> when a <mat-checkbox> is checked/unchecked.
My checkbox is the following code:
<mat-checkbox formControlName="rushDelivery">
Rush Delivery
</mat-checkbox>
And the <div> I want to show/hide will be below the checkbox, further down on the page.
I have used [(ngModel)] and *ngIf in the past, however from my understanding, the latest version of Angular does not support [(ngModel)] and *ngIf if formControlName is also used in the same element.
I cannot remove the formControlName since I use it to get the value of the checkbox upon the submission of the form. I also don't want to touch that portion of the code in case I break the form.
What would be the easiest alternative solution to show/hide the <div> when the checkbox is checked/unchecked?
Thanks.

In your HTML-
<mat-checkbox (click)='toggle()'>
Rush Delivery
</mat-checkbox>
<div [hidden]='isHidden'>
<p>This is a paragraph</p>
</div>
In your TS, initially define isHidden variable to false-
isHidden=false;
In your function-
toggle(){
this.isHidden=!this.isHidden;
}

you can access the value of a FormControl using get, so, if your formGroup is called, e.g. form, you only need
<div *ngIf="form.get('rushDelivery').value">
..If you can see this is because...
..the checkbox is checked..
</div>

Although [(ngModel)] won't work with formControlName, you can still show/hide the div in serval ways.
option 1: add *ngIf="form.rushDelivery" onto the div that you want to show/hide
option 2: add (change)="checked = change.checked" callback to mat-checkbox and add *ngIf="checked" onto the div

there are multiple ways for achieving the solution, to show/hide the div!
.html
<mat-checkbox formControlName="rushDelivery" (click)='showOrHide()'>
Rush Delivery
</mat-checkbox>
<div [class.hide]='isVisible'>
Some info ...
</div>
.ts
isVisible = true;
showOrHide(){
this.isVisible = !this.isVisible;
}
.css
.hide{
display: none;
}

Bootstrap Selectpicker will not reset using built-in functions

I have an array of Bootstrap Selectpickers for filtering results from a database. I need a way of resetting all the selectpickers to 'Nothing Selected', this is my code:
HTML
<div class="row">
<div class="col-md-3">
<label>By Group</label>
<select id="groups" name="group" class="form-control selectpicker" multiple></select>
</div>
<div class="col-md-3">
etc...
</div>
</div>
JS
ajax_fetch('build_group_options', {groupno:groupno}).done(function(html) {
//var html is a list of options in html format
$('#groups').html(html).find('option[value=""]').remove();
//refresh the selectpicker to make sure options are registered in the picker
$('.selectpicker').selectpicker('refresh');
});
Try to reset all the pickers:
$('#reset_filters').click(function() {
$('.selectpicker').selectpicker('deselectAll');
$('.selectpicker').selectpicker('render');
$('.selectpicker').selectpicker('refresh');
$(this).closest('form').find('.selectpicker').each(function() {
$(this).selectpicker('render');
});
});
As you can see I have tried all the functions to reset but to no avail so am obviously doing some wrong further up the logic.

I got solution from following code.Try it
$("#listID").val('').trigger('change');
And also you can try this
$("#listID").val('').selectpicker('refresh');

Maybe it's a little late, but maybe it'll help someone someday. For me the solution was this:
$("#listID").val([]).selectpicker('refresh');
I had the multiselect option and with this you replace your chosen items for an empty array, otherwise you'll choose the option where the value is empty val('').

So I looked in the selectpicker.js file, the deselectAll and selectAll functions both filter their respective options by a few arguments (see line 884):
deselectAll: function () {
this.findLis();
this.$lis.not('.divider').not('.disabled').filter('.selected').filter(':visible').find('a').click();
}
A little breakdown:
.not('.divider') //prevents the divider receiving a click event!
.not('.disabled') //ignore any disabled elements
.filter('.selected') / .not('.selected') //depending if its selectAll() or deselectAll()
.filter(':visible') //prevent any non-visible element receiving a click event!?
My problem was the .filter(':visible'), the list was not visible when the click event was triggered so these options were filtered out and therefore did not get 'clicked'/'deselected'.
I amended my version of the plugin and now my 'reset' button works as expected. The new line is:
this.$lis.not('.divider').not('.disabled').filter('.selected').find('a').click();

Angular ui.bootstrap.buttons not updating after element remove

I have a set of Radio-bottoms, that is driven off a Array. for a Multi-Choice answer setup.
<div ng-repeat="option in options">
<div>
<button type="button" style="min-width: 100px" class="btn btn-default" ng-model="question.answer" btn-radio="'{{option.option_id}}'">{{option.option_text}}</button>
</div>
</div>
When I add to the array, things are good, mainly since the preset answer is lower than the new element in Options.
If I then delete one of the Options above the answer, and redefined the new Answer id.. the Radio buttons are not updated correctly. I know the answer is updated as I have it displayed on the screen. but the buttons are not updated.
UPDATE NEW PLUNKER!
I have done a plunker : http://plnkr.co/edit/2XWFwClewqtcXWPY8ZSK. As you can see if you select the different options the answer follows.. Now if you select the third option and remove the first or second option you will see that the answer will update but the check buttons is not updated right.
Can someone shed some light on this ?
Thanks in advance
Kim

With some genouros help from the ui team did I find that it was a simple type casting error.
$scope.cp.options[i].option_id = i + 1;
Should be
$scope.cp.options[i].option_id = "" + (i + 1);
I have updated the plunker if anyone need the full sample. Here

jQuery Switch Button On/Off Should Set Different Data-status & Onclick Function

Still learning jQuery and will be thankful for any help.
I am currently using this jQuery Switchbutton https://github.com/olance/jQuery-switchButton
It uses a checkbox as an input type, and creates span tags with labels.
How would I say that I want on_label to have data-status="accept", and off_label data-status="decline"?
HTML:
<input type="checkbox" id="accept-offer"/>
JS:
$("input#accept-offer").switchButton({
on_label: "Accept",
off_label: "Ignore"
});
Thanks!!

You can try to do like this:
$('.switch-button-label.on').data('status','accept');
$('.switch-button-label.off').data('status','decline');
or:
$('.switch-button-label.on').attr('data-status','accept');
$('.switch-button-label.off').attr('data-status','decline');

How can I determine whether a Primefaces RadioCheckbox was checked?

I know there are lot of examples here that shows how to count the checked checkboxes but for some reason I'm unable to make this work.
What I'm trying to do is that when at least one checkbox in my page is checked a button should be enable or disable if none of the checkboxes are checked.
The thing is even that I implemented the following code, the count of checked checkboxes is always 0, I'm not sure what I'm missing.
Primefaces component:
<p:column id="idSelectBox" selectionMode="multiple" style="width:68px" />
JQuery Code:
function countChecked() {
var n = $("input:checkbox:checked").length;
alert('Count: ' + n);
}
$(":checkbox").click(countChecked);
Hope you can help me out!
UPDATE 1:
I did a little more research and the Primefaces component does not render to HTML checkboxes elements, its outputs is a set of divs and classes:
<td class="ui-selection-column">
<div class="ui-dt-c">
<div class="ui-radiobutton ui-widget">
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-radiobutton-relative ui-state-default">
<span class="ui-radiobutton-icon"></span>
</div>
</div>
</div>
</td>
So I'm still trying to figure out how I can detect whether the checkbox was checked or not.

PrimeFaces 3.1 datatable client side api has getSelectedRowsCount() method you can use to see if there are any selected rows.

you have to use the attribute selector see http://api.jquery.com/category/selectors/attribute-selectors/
var n = $("input[type=checkbox][checked]").length;