<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="container">
<h1>Hello Plunker!</h1>
<form name="backgroundPanelForm" novalidate="novalidate" role="form">
<div class="col-xs-12">
<div class="row radio-set background-radio-labels">
<div class="radio">
<input type="radio" data-ng-click="backgroundCtrl.switchPanel('uploadImage')" name="optionsRadios" id="optionsRadios1" data-ng-class="{uploadImageActive : backgroundCtrl.showPanel == 'uploadImage'}" value="uploadImage" data-ng-model="backgroundCtrl.uploadImage">
<label class="choose-image" for="optionsRadios1">
<span></span>upload images
</label>
</div>
<div class="radio">
<input type="radio" data-ng-click="backgroundCtrl.switchPanel('chooseExisting')" name="optionsRadios" id="optionsRadios2" data-ng-class="{chooseExistingActive : backgroundCtrl.showPanel == 'chooseExisting'}" data-ng-change="backgroundCtrl.switchPanel('chooseExisting');"
value="chooseExisting" data-ng-model="backgroundCtrl.chooseExisting">
<label class="choose-existing" for="optionsRadios2">
<span></span>choose existing
</label>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
// Code goes here
jQuery(function($){
$("#optionsRadios1:radio").click(function () {
$('label.choose-existing').toggleClass('radio-disabled', this.checked);
});
$("#optionsRadios2:radio").click(function () {
$('label.choose-image').addClass('radio-disabled', this.checked);
});
})
/* Styles go here */
.radio-disabled {
color: #d3d3d3;
}
.background-radio-labels label {
text-transform: uppercase;
padding-left: 0;
}