hello what could be the problem ngModelChange is not firing here?
<input hidden [(ngModel)]="Monday" type="checkbox" name="monday" id="monday" value="monday" (ngModelChange)="changed()">
<label class="btn btn-event-repeat" (click)="Monday = !Monday">
<span class="daylongname">Monday</span>
<span class="dayshortname">Mon</span>
</label>
Related
I am trying to find a way to activate a button when both of those checkboxes are checked. I've disabled the button but I can't think of a method of actually triggering the isActive when both of them are checked.
<div class="form-check mb-1">
<input
class="form-check-input"
type="checkbox"
id="age"
checked
/>
<label
class="form-check-label"
for="age"
>By clicking this you agree that you
are at least 18 years old.</label
>
</div>
<div class="form-check mb-4">
<input
class="form-check-input"
type="checkbox"
id="terms"
checked
/>
<label
class="form-check-label"
for="terms"
>By clicking this you agree to our
<router-link to="/terms"
>Terms & Conditions</router-link
>
</label>
</div>
<button
:disabled="isActive"
class="btn btn-outline-light btn-lg px-5 mb-1"
type="submit"
>
Register
</button>
<script>
export default {
data() {
return {
isActive: true,
};
},
};
</script>
You should do something like
First checkbox
<input class="form-check-input" v-model="checkOne" type="checkbox" id="age" checked />
second checkbox
<input class="form-check-input" v-model="checkTwo" type="checkbox" id="age" checked />
button
<button :disabled="!checkOne || !checkTwo" class="btn btn-outline-light btn-lg px-5 mb-1" type="submit" >
I used this Bootstrap 3 code to change radios into buttons:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
It works well in the jsfiddle but in my website the color of buttons are not changed when clicked. It always is like this:
But the submitted value is correct.
I added this code to add .active class manually:
// Change the color of selected radio button
$('label.btn').click(function() {
$(this).parent('.btn-group').children('label.btn').addClass('active');
$(this).removeClass('active');
});
UPDATE:
This code is not needed. You just need to add class 'active' to one of labels initially.
This code works well without any js:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="sim_type" value="option 1" checked>Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="sim_type" value="option 2">Option 2
</label>
</div>
<div class="btn-group clearfix" data-toggle="buttons" v-radio="auth">
<label class="btn btn-sm btn-default active">
<input type="radio" name="auth" value="1">
Apple
</label>
<label class="btn btn-sm btn-default">
<input type="radio" name="auth" value="2">
Banana
</label>
<label class="btn btn-sm btn-default" v-if="isRich">
<input type="radio" name="auth" value="3">
Pear
</label>
</div>
Here the third element has a v-if on the label, and originally isRich is false when page is loaded. Then, isRich is set to be true before click on the third element. But auth value is still 1 instead of 3.
How can I get 3 instead of 1 as auth value in this case?
Use v-model for this.
See: https://v2.vuejs.org/v2/guide/forms.html#Radio
<div class="btn-group clearfix" data-toggle="buttons" v-radio="auth">
<label class="btn btn-sm btn-default active">
<input type="radio" name="auth" value="1" v-model="auth">
Apple
</label>
<label class="btn btn-sm btn-default">
<input type="radio" name="auth" value="2" v-model="auth">
Banana
</label>
<label class="btn btn-sm btn-default" v-if="isRich">
<input type="radio" name="auth" value="3" v-model="auth">
Pear
</label>
</div>
I am creating a bootstrap btn-group that I want to give the user the ability to select one or no options from. Everything on the data end is working great except for the fact that I can not remove the active class from the button when the user turns it off.
<div class="btn-group" id="localRasterBG" data-toggle = "buttons">
<label class="btn btn-default localBaseMaps" id="btnLand Cover" data-layerName="Land Cover" onclick="rasterButtonClick(event)" >
<input type="radio" name="options" id="btnLandCover" autocomplete="off"> Land Cover
</label>
<label class="btn btn-default localBaseMaps" data-layerName="Elevation" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnElevation" autocomplete="off"> Elevation
</label>
<label class="btn btn-default localBaseMaps active" id="btnPopulation" data-layerName="Population" onclick="rasterButtonClick(event)">
<input type="radio" name="options" id="btnLandScan" autocomplete="off"> Population
</label>
</div>
However, I am unable to remove the "active' class with javascript:
function rasterButtonClick(e){
e.target.removeClass("active");
}
Any idea what I could be doing wrong?
Thanks, Tyler
removeClass is a jQuery function, you need to change it to:
$(e.target).removeClass("active");
I have a set of javascript buttons nested within another set of javascript buttons. Below is my fiddle.
<div data-toggle="buttons" style="padding: 20px;">
<div class="col-xs-6">
<div class="btn btn-info" style="padding: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP101" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP102" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP103" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP104" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="btn btn-info" style="padding:20px;">
<div class="row">
<div class="col-sm-12">
<div class="btn-group btn-group-justified btn-group-lg" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="package" value="RP201" data-duration="7" />1</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP202" data-duration="14" />2</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP203" data-duration="21" />3</label>
<label class="btn btn-primary">
<input type="radio" name="package" value="RP204" data-duration="28" />4</label>
</div>
</div>
</div>
</div>
</div>
</div>
http://jsfiddle.net/q4xLs9f8/
My issue is that when I click the top level button, it logs out the nested radio button as if it was already selected. I don't have anything marked as selected or checked.
Does nesting buttons like this cause problems?
Nesting is certainly not intended. What happens is that it the javascript is selecting the last radio input in the group and selects that.