I am trying to implement a checkbox that has a clickable label with the Html.CheckboxFor syntax. However, I am running into an issue where my checkbox is not allowing me to click it to toggle its state and is not being set properly when the page is loaded even thought the checked attribute is correct.
From what I have been reading, it seems that this is do to the extra hidden input field that gets generated to pass back false values to the controller on a form submittal. However, I still need to figure out a way around this and I feel like I am not the first one to be looking for a solution.
Here is my HTML:
<div class="form-check">
#Html.CheckBoxFor(x => x.ProfilePublicViewable, new { #class = "form-check-input", #id = "val1", #value = "val1", #checked = "checked" })
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
And here is what gets rendered to the DOM:
<div class="form-check">
<input checked="checked" class="form-check-input" id="val1" name="val1" type="checkbox" value="val1">
<input name="ProfilePublicViewable" type="hidden" value="false">
<label class="form-check-label" for="val1">Profile Public Viewable</label>
</div>
I have been looking around for examples on how to achieve this design, but seem to be coming up empty handed. Does anyone have any ideas as to where i am going wrong?
Related
How to make one button default radio button when html code does not contain options directly, data coming directly from server.
In my project I have one radio button field "Applies To".
The radio button options are not mentioned in the code as you see, I should make one option select by default, if options are not directly mentioned in the code.
How can I make one button default in this case?
<div class="row row-margin">
<label style="margin-top: 34em;margin-left: -1em;">Applies To:</label>
<label class="input" *ngFor="let question of QuestionnaireAppliesTo">
<label class="radio">
<span class="tableCellDisplay customRadioInline">
<input type="radio" [(ngModel)]="questionnaire.EntityTypeUniqueID"
name="AppliesTo" class="radio-custom" [value]="question.UUID" id="type_{{question.UUID}}">
<label for="type_{{question.UUID}}" class="radio-custom-label">{{question.Name}}</label>
</span>
</label>
</label>
</div>
My typescript code:
getQuestionnaireCategories() {
this.lookupValues.then((response: any) => {
this.QuestionnaireAppliesTo = response.QUESTIONNAIRECATEGORIES;
});
};
My html code,
<div>
<div>
<input type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
<label class="label" for="Checkbox0" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox1" name="cCheckbox1" class="custom-control-input" (change)="checkSelected(checkBox[1].label)">
<label class="label" for="Checkbox1" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox2" name="cCheckbox2" class="custom-control-input" (change)="checkSelected(checkBox[2].label)">
<label class="label" for="Checkbox2" >first</label>
</div>
</div>
<div>
<div>
<input type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
<label class="label" for="Checkbox3" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox4" name="cCheckbox4" class="custom-control-input" (change)="checkSelected(checkBox[4].label)">
<label class="label" for="Checkbox4" >first</label>
</div>
<div>
<input type="checkbox" id="Checkbox5" name="cCheckbox5" class="custom-control-input" (change)="checkSelected(checkBox[5].label)">
<label class="label" for="Checkbox5" >first</label>
</div>
</div>
Likewise I have two more separate divs in the same html file which contains checkboxes. What I need to do is onclick of first checkbox in first div ,I need to disabled every other checkboxes from the first div,second div & third.
As I'm totally new to angular I have no idea how to disable here. I have tried using ng-disabled but it seems not working. Can someone help me with this?
For Angular 2+, you can enable / disable the checkbox by setting the disabled attribute on the input type=checkbox
Use: [attr.disabled]="isDisabled ? true : null"
Note here that [attr.disabled]="isDisabled alone will not work. You will need to explicitly set disabled attribute to null for removing disabled attribute from the disabled checkbox.
<input type="checkbox" [attr.disabled]="isDisabled ? true : null" />
ng-disabled is AngularJS syntax. You can use [disabled] input for disable checkboxes.
<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">
in .ts isDisabled : boolean;
Optional thing
You can use Angular Material for your developments. because it has many advantages. And also it has well defined API.
<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.
Angular Material
You can use the [disable] attribute your input[type="checkbox"] tag.
For eg: -
<input [disabled]="isDisabled" type="checkbox" id="Checkbox3" name="cCheckbox3" class="custom-control-input" (change)="checkSelected(checkBox[3].label)">
isDisabled variable will hold the boolean value in your .ts
For larger, more complex forms I highly recommend using a reactive form. With a reactive form, you can use [disabled]="condition" where the condition is something like whateverCheckbox.value.
UPDATE:
I updated my answer to use whateverCheckbox.value as opposed to whateverCheckbox.checked. This approach only works with reactive forms. I highly recommend using reactive forms for larger, more complex forms where you may need more detailed, personalized control over the elements of the form. Reactive forms are built around observable streams, where form inputs and values are provided as streams of input values, also while giving you synchronous access to the data.
Here is the documentation: https://angular.io/guide/reactive-forms
Once you have the form set up as a reactive form, a form control instantiated and bound to the checkbox input form element, you should be able to access the value of the checkbox as indicated above.
UPDATE 2: You don't necessarily need to use a form either to take advantage of a reactive form control.
In your component.ts file import FormControl from #angular/forms as below:
import { FormControl } from '#angular/forms';
Then declare the form control in the component class, as such:
checkbox1 = new FormControl('');
Then in your template, simply bind that FormControl to the input element as such:
<input type="checkbox" [formControl]="checkbox1">
and then you should be able to access that value anywhere using:
checkbox1.value
If you are using reactive forms you can also disable the checkbox from the component like this
import { FormBuilder, FormGroup } from '#angular/forms';
constructor(private _fb: FormBuilder) { }
myForm: FormGroup;
ngOnInit(): void {
this.myForm = this._fb.group({
myCheckBoxInput: [{value: 1, disabled: true}],
});
}
in reactive form, you can disable the checkbox like so
this.formGroup.get('Checkbox1').disable({ onlySelf: true });
Is it possible to have a single checkbox with two values ? i have a checkbox called "full-day ?".
<div class="input-field col s2">
<p>
<input type="checkbox" id="test6" value="yes" ng-model="isFull"/>
<label for="test6">Half Day</label>
</p>
</div>
if the user checks it a yes should be passed when i press submit button and if the checkbox is not checked a no have to be passed.As far as i know if the checkbox is not activated html treats as if checkbox is not present and it wont be included in the query string.Here using radio button is not an option.Please let me know how do i go about it.
This is simple:
<input type="hidden" id="test6" value="no" ng-model="isFull" checked>
<input type="checkbox" id="test6" value="yes" ng-model="isFull">
<label for="test6">Half Day</label>
It is boolean.
Code is processed sequentially
Only the last 'checked' answer is used.
Therefore put the 'non' answer first but hide it and leave it always checked. The positive answer comes second.
If the form is editable (user can come back and change their answer) code to check the single visible checkbox appropriately e.g.
<?php if ($fieldValue=='Yes' ){ echo 'checked'; } ?>
Works for me!
Not really.
You can fake things with JavaScript that injects hidden inputs, but this is better handled with server side code.
e.g.
my $value;
if ($request->param("checkbox_name") {
$value = "yes";
} else {
$value = "no";
}
I have a form on my webpage and its being submitted to a NodeJS backend.
I'm having trouble with the checkboxes. When the are submitted to server, and I read them via req.body.foods, I get something like ['on', 'on', 'on'].
But I want to get the actual values, that is, something like ['dairy', 'fish'] etc.
How can I do that?
<div class="col-sm-6">
<div class="checkbox">
<label><input name="food" type="checkbox" value="dairy">Dairy</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="meat">Meat</label>
</div>
<div class="checkbox">
<label><input name="food" type="checkbox" value="fish">Fish</label>
</div>
</div>
You can do the following in the node.js file:
console.log(req.body.food); //This will print the array of values.
If you have only one checkbox selected in the page, (eg: Dairy) it will print "dairy". If more than one checkbox, then you get "{ 'dairy', 'meat' }" in the output. Make sure the checkboxes are within the form.
Another method:
Include a hidden input element in your form:
<input name="SelectedValues" type="hidden" value="">
Also include a call to a javascript file in the onchange event of every checkbox, or in the onclick event of the submit button in the form.
onclick='buildlist("YourCheckBoxName","SelectedValues");'
Use a javascript function to loop through your checkbox and build a comma separated list of selected values:
function buildlist(listName,labelName){
var controls = document.getElementsByName(listName);
var label = document.getElementsByName(labelName);
label.value = '';
for(var i=0;i<controls.length;i++){
label.value += controls[i].value.toString()+',';
}
}
Now inside the node.js file, use the following code to access the list of values:
req.body.SelectedValues
Looks like you are using bootstrap to generate your form checkboxes. Try using the "form-check" and "form-check-input" classes instead.
<div class="form-check">
<input class="form-check-input" type="checkbox" name="food" value="dairy" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">Dairy</label>
</div>
Having a bizarre issue that I'm hoping people can shed some like on.
When I've been making forms with check boxes and radio buttons in my jQuery Mobile MVC 4 project, if I use Razor syntax to spit out the controls according to the view model e.g. #Html.RadioButtonFor etc instead of just writing the standard input type="radio", jQuery Mobile doesn't apply the styles to the elements. Screen shots and code differences included. Is this something to do with the way the controls are being rendered? Happens in both Views and Partial Views.
I have changed just the first set of radio buttons here to demonstrate the point. If I change the whole form to Razor HTML helpers, I would get the same across all of the controls.
Non-Razor:
Razor:
Non-Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
<input type="radio" data-theme="b" name="Period" id="Daily" value="Daily" checked="checked" />
<label for="Daily">Daily</label>
<input type="radio" data-theme="b" name="Period" id="Weekly" value="Weekly" />
<label for="Weekly">Weekly</label>
<input type="radio" data-theme="b" name="Period" id="Monthly" value="Monthly" />
<label for="Monthly">Monthly</label>
</fieldset>
Razor code:
<fieldset data-role="controlgroup" data-type="vertical" class="recurrencyArea">
<legend></legend>
#Html.LabelFor(x=>x.Period, "Daily")
#Html.RadioButtonFor(x => x.Period, "Daily", new { data_theme = "b", #Checked = "checked", id = "Daily" })
#Html.LabelFor(x=>x.Period, "Weekly")
#Html.RadioButtonFor(x => x.Period, "Weekly", new { data_theme = "b", #Checked = "checked", id = "Weekly" })
#Html.LabelFor(x=>x.Period, "Monthly")
#Html.RadioButtonFor(x => x.Period, "Monthly", new { data_theme = "b", #Checked = "checked", id = "Monthly" })
</fieldset>
Is the razor html being generated after the jquery mobile scripts have run over the page?
Anybody with any helpful ideas/or indeed anyone who can spot any stupid mistakes would be a hero!
Many thanks,
Christian
I'm not too familiar with jquerymobile, but the on glitch i can see here, is that for the html code you have labels that look like this:
<label for="Daily">Daily</label>
while the razor code will output the labels like this:
<label for="Period">Daily</label>
The "for" attribute is wrong for your sceanrio in the razor code, maybe jquery mobile is sensitive to that?