I am new to Vue.js. Basically, I have two checkboxes and I want them to behave like a radio-buttons (I know I can use a radio but I wanna know what the problem is) It works fine in Safari, but not in Chrome.
these are the checkboxes:
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" v-model="list"
v-on:click='mini=!list'>
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" v-model="mini"
v-on:click='list=!mini'>
<span class="switch">
<p>mini</p>
</span>
</label>
and in data I declare
list: true,
mini: false,
It checks the first box #mini-box when it loads but when the boxes are clicked the both toggle true or false
Thank you for any help!
Due to different browser behavior, you can bind event using $nextTick like this to prevent inconsistency. Seems this is more readable and traceable than using watcher.
<label class="list-display" for="list-box">
<input type="checkbox" id="list-box" :value="list" #click="$nextTick(()=>{mini = !(list=$event.target.checked)})">
<span class="switch">
<p>list</p>
</span>
</label>
<label class='list-display' for="mini-box">
<input type="checkbox" id="mini-box" :value="mini" #click="$nextTick(()=>{list = !(mini=$event.target.checked)})">
<span class="switch">
<p>mini</p>
</span>
</label>
Related
So imagine I have 3 checkboxes, 1 'parent' checkboxes and 2 'child' checkboxes.
If the parent checkbox is checked, I want to be able to check either or both of the two child checkboxes.
If the parent checkbox is unchecked, I either of the two child checkboxes should not be checkable at all.
<div id="mycheckboxes">
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox1($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description">
</label>
</div>
currently everyone of of these checkboxes are checkable, to reiterate the above, I am trying to make it so if parentcheckbox is checked, the two children are selectable, and if parent is unchecked, the two children are uncheckable.
Inside component.ts file add these lines:
parentcheckbox1;
childcheckbox1;
childcheckbox2;
isParentChecked = true;
parentcheckbox(event) {
this.isParentChecked = !event;
}
and the HTML would look like this:
<div id="mycheckboxes">
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event)">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
<label class="custom-control custom-checkbox" style="display: block">
<input type="checkbox" class="custom-control-input" id="childcheckbox2" name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">
<span class="custom-control-indicator"></span>
<span class="custom-control-description"></span>
</label>
</div>
I made few changes in the file. Like missing closing tag of span, parentcheckbox1 method renamed to parentcheckbox and added disabled in child checkboxes.
Here is the working stackblitz link: https://stackblitz.com/edit/angular-b5mpvv?file=src/app/app.component.html
Let me know if face any issue.
New Update based on comments:
parentcheckbox method:
parentcheckbox(event, child1, child2) {
this.isParentChecked = !event;
if (!event) {
child1.checked = false;
child2.checked = false;
}
}
HTML Changes:
<input type="checkbox" class="custom-control-input" id="parentcheckbox" name="parentcheckbox"
[(ngModel)]="parentcheckbox1" (ngModelChange)="parentcheckbox($event, child1, child2)">
<input type="checkbox" class="custom-control-input" id="childcheckbox1" name="childcheckbox1"
#child1
[(ngModel)]="childcheckbox1" (ngModelChange)="childcheckbox1($event)" [disabled]="isParentChecked">
<input type="checkbox" class="custom-control-input" id="childcheckbox2"
#child2 name="childcheckbox2"
[(ngModel)]="childcheckbox2" (ngModelChange)="childcheckbox2($event)" [disabled]="isParentChecked">
In the parent change handler parentcheckbox1() set a property e.g. disableChildCheckboxes - to either true or false. Bind this to the disabled attribute of the child inputs using
<input [attr.disabled]="disableChildCheckboxes || null"
Also, use distinct names for the handler functions and ngModel i.e not the same name for both
For people using VanilaJS (Not Angular)
EDIT: I haven't used Angular so I didn't realize that there is a better way to do this. I will leave this answer up for those wanting a way to do this in VanillaJS.
I have tried three almost identical approaches here, all using javascript. For all of them you will need to add the disabled attribute to the children and add an onclick attribute to the parent with the appropriate function copied into the page. If you only have one of these on your page than I would probably go for approach 1 or 2 otherwise I would use approach 3.
This just runs a function which checks if the parent is checked when you click on it and disables/enables the children accordingly.
Add onclick="toggle_children()" to the parent checkbox.
This is similar to 1 but when you call the function you are also sending whether the box is checked of not so the if statement is not needed.
Add onclick="toggle_children1(this.checked)" to the parent checkbox.
This is best if you are using multiple of these groups on a page. On each parent add onclick="toggle_children2(this.checked, children_array)" where children_array is an array containing the id's of all the children connected to that parent.
// onclick="toggle_children()"
function toggle_children() {
if (document.getElementById('parentcheckbox').checked) {
document.getElementById('childcheckbox1').disabled = false;
document.getElementById('childcheckbox2').disabled = false;
} else {
document.getElementById('childcheckbox1').disabled = true;
document.getElementById('childcheckbox2').disabled = true;
}
}
// onclick="toggle_children1(this.checked)"
function toggle_children1(state) {
document.getElementById('childcheckbox1').disabled = !state;
document.getElementById('childcheckbox2').disabled = !state;
}
// onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])"
function toggle_children2(state, children) {
let i;
for (i = 0; i < children.length; i++) {
document.getElementById(children[i]).disabled = !state;
}
}
label {
display: block
}
<div id="mycheckboxes">
<label>
<input type="checkbox" id="parentcheckbox" onclick="toggle_children2(this.checked, ['childcheckbox1', 'childcheckbox2'])">Parent
</label>
<label>
<input type="checkbox" id="childcheckbox1" disabled>Child1
</label>
<label>
<input type="checkbox" id="childcheckbox2" disabled>Child2
</label>
</div>
Have following data passed from backend:
ALL_CONFIGS: {callDigitalIo=true, controllerId=1, numberPlatesHashSalt=..., numberPlatesShouldBeHashed=false, parkingStatusShouldBeChecked=true}
Where boolean params should be displayed like input element with type=checkbox.
Here is how I handle it on UI page (.ftl):
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked??>checked="checked"</#if>
/>
</label>
</div>
However, checkboxes are all selected:
Number Plates Should be Hashed should not be selected.
How to select only true variables?
After huge research I found solution for this issue:
<div>
<label class="col-form-label">
Parking Status Should Be Checked:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked"
<#if parkingStatusShouldBeChecked == "true">checked</#if>
/>
</label>
</div>
It works fine.
Assuming that parkingStatusShouldBeChecked is a boolean, this way works too:
<input type="checkbox" class="form-check-input ml-2"
id="parkingStatusShouldBeChecked" name="parkingStatusShouldBeChecked"
${parkingStatusShouldBeChecked?string('checked','')} />
The first parameter is the "true" expression, so FreeMarker prints checked. Otherwise it prints just an empty string.
See https://freemarker.apache.org/docs/ref_builtins_boolean.html#ref_builtin_string_for_boolean
Okay, so I got a custom radio button:
<label class="radiobtn" id="region">EUW
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
And I'd like to store the text next to it (EUW) into a localStorage item called "region", when the radio button is checked.
There are multiple radio buttons of this and i want to do it for all of them.
Each custom radio button has another value (EUW, EUNE, JP, KR, etc...)
Everything else is similar.
So I kinda tried to figure out how I could do that, but I couldn't came across a good solution.
Do you guys have some good solutions? :O
Thank you for any help, I appreciate it.
Cheers!
You create custom radio buttons all with same class radiobtn, then in JQuery on radiobtn class click event check if radio button is checked, get label text and store it in localStorage.
JSFiddle
https://jsfiddle.net/mLst49h8/
HTML
<label class="radiobtn" >EUW
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
<label class="radiobtn" >EUNE
<input type="radio" name="radio" >
<span class="checkmark"></span>
</label>
JQuery
$( ".radiobtn" ).click(function() {
if($(this).children("input").is(":checked")) {
// alert( $(this).text());
var region = $(this).text();
localStorage.setItem("region", region);
region = localStorage.getItem("region");
alert(region);
}
});
I am using selenium and python 3.X to login into a bank.
I have a input type="radio" class="switch-input" with two options Personal/Business when default is Personal
elem1=browser.find_element_by_id('business')
elem2=browser.find_element_by_id('personal')
and checking with
elem1.get_attribute('checked')
elem2.get_attribute('checked')
I am getting the expected results (True for the elem2 and None for elem1)
But when using elem2.click() i am getting error :
selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable
I tried to change to find_element_by_xpath and to wait but the same results.
Any ideas?
Here is the HTML code:
<div class="custom-switch">
<div class="switch switch-blue">
<input type="radio" class="switch-input" name="view" id="personal" value="Personal" checked="checked" />
<label for="personal" class="switch-label switch-label-on personal">Personal</label>
<input type="radio" class="switch-input" name="view" id="business" value="Business" />
<label for="business" class="switch-label switch-label-off business">Business</label>
<span class="switch-selection"></span>
</div>
</div>
The answer was to press on the label
browser.find_element_by_xpath('//label[#for=\'business\']').click()
I've some piece of code in HTML code,
<label class="color">
<input type="checkbox" checked>
<span class="slider round"></span>
</label>
How do I convert this html code into codeigniter with form helper Form Control?
Try with this code :
Note : First load form_helper either in autoload.php or in controller
Assuming that checkbox name is username
<?=form_label(form_checkbox('username','',['checked' => TRUE]).'<span class="slider round"></span>','username',['class' => 'color']);?>
Output :
<label for="username" class="color">
<input type="checkbox" name="username" value="" checked="checked" />
<span class="slider round"></span>
</label>
For more : https://www.codeigniter.com/userguide3/helpers/form_helper.html