We Keep Coding

I can't get jQuery to work with Bootstrap buttons

Put simply: my goal is to have two buttons on a page, so that "1" is displayed when the first is pressed, and "2" is displayed when the second is pressed. This works with radio input, but when I add a button label from Twitter Bootstrap, it no longer works.
First, here is the jquery I am using. I am trying to change the value of the span to the value of the button pressed:
<span id="val">0</span>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
$('input[type=radio]').click(function() {
$("#val").html($(this).val());
});
});
</script>
It works fine with this:
<input type="radio" Id="Radio1" value="1" name="a">
<input type="radio" Id="Radio2" value="2" name="a">
But when I do this, it no longer works (I can see and press the buttons, but the value of span remains at 0):
<div class="btn-group" data-toggle="buttons">
<label type="button" for="Radio1" class="btn btn-primary active">
<input type="radio" Id="Radio1" value="1" checked>
</label>
<label type="button" for="Radio2" class="btn btn-primary">
<input type="radio" Id="Radio2" value="2">
</label>
</div>
It seems to me like the label tags are causing a problem, but I am unsure why. Removing the labels makes it work, but I need the button labels.

Place the click event on labels, then find the value on its "input" children:
$(function() {
$('div.btn-group label').click(function() {
$("#val").html($(this).children('input').val());
});
});
JsFiddle: https://jsfiddle.net/5vh3yzzq/1/

How to enable the button only if all the checkboxes are checked in angular.js for a dynamically loaded view

I have the following view in angular.js where I have several checkboxes for various terms of an agreement.
<div class="modal-body">
<div class="col-xs-12 form-group">
<p>I acknowledge that I understand the following:</p>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term1">Some term1 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here
is not a credit transaction.
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
</label>
</div>
</div>
Then I have a button below it as follows and I need to enable this button only when all the checkboxes are checked. Please note that this mark up comes in a dynamically loaded modal window. I have tried the way which is posted in this url by doing some basic logic change to make it work as per my need -> How to check if any Checkbox is checked in Angular. It doesn't seems to be working when view is loaded dynamically and watcher throws error in console when it is not able to find it.
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>

As you have it set up currently, this should work:
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.term1 && agreement.term2 && agreement.term3 && agreement.term4 && agreement.term5 && agreement.term6">Confirm</button>
Using ng-if, the button would only be displayed if all 6 conditions are true.
Another alternative which I personally use is the checklist-model add on. Using this, you can add all of the checkboxes into a single array model, and then just check the length like so:
Give each checkbox the model:
<div class="checkbox" >
<label>
<input type="checkbox" checklist-model="agreement" checklist-value="true"> Some term1 goes here
</label>
</div>
// Repeat for all checkboxes
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();" ng-if="agreement.length === 6">Confirm</button>
As Paul pointed out, you can also use ng-disabled="agreement.length < 6" instead of ng-if if you wanted to disable the button rather than hide it altogether.

Add a function like the following to your scope:
$scope.submitDisabled = function() {
var allChecked = $scope.agreement.term1 && $scope.agreement.term2 &&
$scope.agreement.term3 && $scope.agreement.term4 &&
$scope.agreement.term5 && $scope.agreement.term6;
return !allChecked;
}
Then for you button do:
<button type="button" ... ng-disabled="submitDisabled()">Confirm</button>
This assumes you want the button visible, but disabled, rather than hidden.

Tried several ways but following way had worked for me. Instead of using watcher, I am calling the function on click to the view around the checkbox.
Following is the function:
$scope.agreement.doIfChecked = doIfChecked;
function doIfChecked(){
$scope.agreement.isAnyUnchecked = !($scope.agreement.term1 && $scope.agreement.term2 && $scope.agreement.term3 && $scope.agreement.term4 && $scope.agreement.term5 && $scope.agreement.term6);
}
And I have used ng-click directive to parent div of the input box as follows:
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term1"> Some term1 goes here.
</label>
</div>
<div class="checkbox" ng-click='agreement.doIfChecked();'>
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here.
</label>
</div>
And the mark up for the button goes as below where I am using ng-disabled directive appropriately:
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-disabled="agreement.isAnyUnchecked" ng-click=" $close();">Confirm</button>

Disable Radio Buttons Until Button Clicked

Sorry if this seems a simple question but I can't figure it out or find a solution anywhere. I am new to angularJS and have a webpage which has two radio buttons and a "Details" button.
Obviously the website is written in angularJS and also using twitter bootstrap.
The question is a "Has the details been checked?" with a "Yes" and "No" radio button.
Clicking the "Details" button opens a modal with a "Close" button on it and details in it.
What I'm after is for these radio buttons to be disabled until the "Details" button has been clicked or once the "Close" button has been clicked from the modal (which ever is the best solution).
The only code I can provide is my HTML. I need it to be done without using JQuery.
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>

You have to look for the ngDisabled directive.
<input type="radio" ng-disabled="!enableRadioButton">
<button ng-click="enableRadioButton = true">Details</button>
Edit
Since you added a code example, something like this should do the trick:
<div class="row" style="margin-bottom: 5px">
<label class="col-sm-6 col-md-5" style="padding-top: 10px;">Have sufficient checks been performed?</label>
<div class="col-sm-2" style="padding-top: 6px;">
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="Yes" required ng-disabled="enableRadioButtons" />Yes
<input name="amlcheckgroup" type="radio" ng-model="withdrawalitems.checkscompleted" value="No" required ng-disabled="enableRadioButtons" />No
</div>
<div class="col-sm-2" style="padding-left: 0px">
<button type="button" class="btn btn-success" ng-click="opendatachecksmodal()" title="Click to see details.">Data Checks</button>
</div>
</div>
Add $scope.enableRadioButtons = true; to the opendatachecksmodel() method.
You could set the flag true when you close the modal as well.

Bootstrap - btn-group, data-toggle="buttons" : how to select a button with JS and deselect all others?

Hi, I'm using Bootstrap's .btn-group class like this:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="radio-popup-position" id="radio-popup-style-1" checked>button-1
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-2">button-2
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-3">button-3
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" id="radio-popup-style-4">button-4
</label>
In my app I need to "manually" select a button with JS and currently I'm doing it like this:
$('#radio-popup-style-rect-1').parent().addClass('active');
$('#radio-popup-style-rect-1').get(0).checked = true;
$('#radio-popup-style-rect-2').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-3').removeAttr('checked').parent().removeClass('active');
$('#radio-popup-style-rect-4').removeAttr('checked').parent().removeClass('active');
... times four, for each case that I need to select one of the buttons. That's not such a big deal if I have just 4 buttons, but now I need to have 13. Which means a lot of code.
My questions - does Bootstrap have a function that I can call to select a button and automatically deselect other buttons from the same group?
Cheers

You can use the attribute selector
$('[id*="radio-popup-style-"]').click(function(){
$(this).prop('checked', true).parent().addClass('active');
$('[id*="radio-popup-style-"]').not($(this)).removeAttr('checked').prop('checked', false).parent().removeClass('active');
});
JSFIDDLE: http://jsfiddle.net/TRNCFRMCN/6o1k1cvo/1/.
About regex in attribute selector: http://www.thegeekyway.com/css-regex-selector-using-regular-expression-css/.

You can use built-in BS method to toogle button state:
(you need default button.js on your page)
https://github.com/twbs/bootstrap/blob/master/js/button.js#L52-L66
http://getbootstrap.com/javascript/#buttons
$('#the-button-id-you-need').button('toggle');

There is no such function/method. However this is unnecessary.
Use class attribute instead of id. Then the code become much simpler:
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="radio-popup-position" class="radio-popup-style" checked>button-1
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-2
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-3
</label>
<label class="btn btn-default">
<input type="radio" name="radio-popup-position" class="radio-popup-style">button-4
</label>
JS:
var aEls = $('.radio-popup-style-rect');
aEls.prop('checked', false).parent().removeClass('active');
aEls.eq(0).prop('checked', true).parent().addClass('active');

$("body").on("click", "label.btn", function(){$(this).find("input")[0].click();});

jQuery Serialize working intermittently with Bootstrap radio button group

I'm trying to serialize a radio-button when the Bootstrap .btn label is clicked.
HTML:
<div class="btn-group" data-toggle="buttons">
<label label-default="" class="btn btn-primary">
<input id="option1" name="options" type="radio" value="1">Option 1</label>
<label label-default="" class="btn btn-primary active">
<input id="option2" name="options" type="radio" value="1">Option 2</label>
<label label-default="" class="btn btn-primary">
<input id="option3" name="options" type="radio" value="1">Option 3</label>
</div>
jQuery:
$(".btn").on('click', function(){
console.log("Name: " + $(this).children('input').attr('name') );
console.log("Value: " + $(this).children('input').val() );
console.log("Serialized: " + $(this).children('input').serialize() );
})
The name and value are always present in my output but the serialization works intermittently (sometimes returning the serialzed value and sometimes returing an empty string) and I can't figure out why.
Demo here: http://www.bootply.com/86422#
Thanks!

You should really read ALL of the documentation on jQuery's .serialize() function if you are having issues.
From the .serialize() API :
Note: Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.
Now from W3's documentation on successful controls :
For radio buttons that share the same value of the name attribute, only the "on" radio button may be successful.
All of that explains exactly why it works intermittently. Because sometimes you happen to check the radio button so it is considered "on" and your function serializes that input button.
Here is a workaround :
Instead of using a input of type radio button, just use a plain input and set the display to none.
<div id="mode-group" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input name="mode" id="option1" value="cash/check" style="display: none">Cash / Cheque / Bank Transfer</label>
<label class="btn btn-primary">
<input name="mode" id="option2" value="jobsBuddy" style="display: none">JobsBuddy Disbursement</label>
</div>
Bootply Demo

jQuery .serialize() and .serializeArray() will only parse buttons which are checked. These are known as "successful controls", as mentioned in the jQuery documentation.
If you'd like to use a Bootstrap button group where all buttons are unchecked (as seen in your question), then you should consider "What if a user never checks any of the buttons?".
Therefore, you should include a hidden button which is checked by default, so that at least one of the buttons in your button group is parsed by .serialize() or .serializeArray().
<form>
<div class="form-group">
<!--
This hidden checked button (with value 'none')
will ensure that `serialize` parses at least one
input in the button group.
-->
<input class="hidden" type="radio" name="color" value="none" checked>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="color" value="blue" />
<span>Blue</span>
</label>
<label class="btn btn-default">
<input type="radio" name="color" value="green" />
<span>Green</span>
</label>
</div>
</div>
</form>