Develop Reference

Javascript alert not working inside data toggle buttons

<div class="xyz" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" onclick='alert("Hellooo");' name="test" value="Radio1" > Radio
</label>
</div>
Javascript alert box is not working with data toggles(Bootstrap is loaded).
Can someone help?
The code snippet is pasted above.
Thanks in advance.

Setting a radio button to checked in jquery not showing it as checked in view

On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House

It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);

It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.

$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.

Turn Off Validation for Disabled Form Controls Angular

I have a button that is set to be disabled until the form is valid. However, depending on the situation some of the form fields are also disabled. My problem is, I need the user to only be required to fill in non-disabled form fields but angular doesn't seem to be validating the disabled fields.
<button ng-click="form.checkVerify(); appCtrl.pageLoad('spec')" ng-disabled="checkVerifyForm.$invalid" class="btn btn-lg btn-success pull-right">Complete</button>
<form name="checkVerifyForm">
<div class="col-md-6">
<fieldset ng-disabled="!form.dataStore.reqMake">
<label for="makeRec">Maker Recourse</label>
<div class="form-group">
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecYes" value="1" /> Yes
</label>
<label class="radio-inline">
<input ng-change="form.justify()" ng-model="form.verify.mRec" type="radio" name="makeRec" id="makeRecNo" value="0" /> No
</label>
<span id="helpBlock" class="help-block">Is there adequete recourse...</span>
</div>
Now I have seen some pretty intense directives that accomplish the task, but is there something simple that can be done in the controller to overcome this specific situation?

You can use e.g. ng-required to achieve that.
<input ng-change="form.justify()"
ng-model="form.verify.mRec"
type="radio"
name="makeRec"
id="makeRecYes"
value="1"
ng-required="form.dataStore.reqMake" /> Yes
AngularJS input documentation

Checkbox appear when certain radio selected

<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="250 GB" required>250GB
</label>
<label class="radio inline">
<input type="radio" name="drivesize" id="drivesize" value="500 GB">500GB
</label>
I have the above bit of html in my webpage and I'd like to add the following if the 500GB radio button is selected.
<label class="checkbox inline">
<input type="checkbox" name="mappings" id="mappings" value="Done" required>Done
</label>
Can anybody tell me the best to do this?

Just a note: you should not use duplicate IDs (see #drivesize). IDs should be unique while classes can be reused. If you change your IDs, it can be easier to check.
Here's a bit of jQuery that should allow you to check for if the box is checked. We will assume that you changed the 500GB ID to largeDrive, the Done button is hidden from view, and you have an event handler on the radio buttons.
if ($('input#largeDrive').is(':checked')) {
$('input#mappings').show(); //assuming it was hidden
}

Bootstrap 3 radio button correct syntax

So I have been in the process of migrating my current project from Bootstrap 2.3 to Bootstrap 3 which has had some major structural changes particularly to due with radio buttons. Currently I have
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
Script Code:
$('#emViewMacsButton').on('click',emViewMacs());
$('#emViewTagsButton').on('click',emViewTags());
$('#emViewSettingsButton').on('click',emViewSettings());
My problem lies in that I have setup my program that each of the different radio buttons must access a different function to display table data. The .on('click') function returns nothing. I've also tried $('input[name=options]') but the active attribute isn't set for any of the radio buttons on the returned piece of HTML .
What would be the correct structure for this ?

http://jsbin.com/uwezip/1/edit
when passing a function ( myFunction() ) into another function callback, just remove the ()
$(function(){ // DOM is now ready to be manipulated
$('#emViewMacsButton').on('change',emViewMacs);
$('#emViewTagsButton').on('change',emViewTags);
$('#emViewSettingsButton').on('change',emViewSettings);
});