I have a form that is divided up into a Kendo UI Panel Bar. In the first panel I have a field that when populated with any text, checks a checkbox that is currently not visible and is located within the collapsed panel below it.
My issue is that the checkbox doesn't check. I've read some posts on how a checkbox is disabled when it isn't visible. Is there a workaround for this?
function Validate(uid) {
if ($("#SomeNumber_" + uid).val().length > 0)
{
$("#MyCheckBox").attr('checked', true); //This checkbox is display:none at the time this is set
//Also tried these, but they didn't work:
//$("#MyCheckBox").click();
//var myCheckBox= document.getElementById("MyCheckBox");
//myCheckBox.checked = true;
}
}
Just tested the display none on a checkbox by dynamically changing it through a button. It works with display none set.
http://jsfiddle.net/jmsessink/hcWf8/1/
The following will set the attr of your checkbox to 'checked' -
this -
$('#MyCheckBox').attr('checked', true)
as well as
$('#MyCheckBox').attr('checked', 'checked')
as well as
document.getElementById('MyCheckBox').checked = true;
as well as
document.getElementById('MyCheckBox').checked = 'checked';
*edit - updated jsfiddle version to show these four methods
Try $("#MyCheckBox").prop('checked', true);
I have a similar usecase and can attest that it is possible to check a hidden checkbox.
I think the correct way to use attr is
$("#MyCheckBox").attr('checked', 'checked');
Related
I have tried few examples to enable particular columns(text box,check box) alone when checkbox is checked.But nothing is working.I have included my code here
function enable()
{
if (document.getElementById("MaincheckboxId").checked == true)
{
document.getElementById("column1Id").disabled = false;
document.getElementById("column2id").disabled = false;
document.getElementById("subcheckboxId").disabled = true;
}
}
Here, when Main Checkbox is checked, column 1 and Column 2 should be enabled. Sub Checkbox should be disbaled.Please let me know what am i missing.
This code should work. Based on your comment, problem might be incorrect calling of enable(). Change your HTML from onclick="enable;" to onclick="enable()" should fix it.
in one of my test case, i have to perform a click on checkbox
i tried : -
var cb = element(by.css('#port'+text));
cb.click() // failed
and
browser.actions().mouseMove(cb).click().perform();
is anybody face this kind of issue , is there any other workaround to do this
updated - tried with hard-coded values:
Template
<input type="checkbox" style="min-width:50px;" id="port32201295-a833-45ea-8268-7c4bc0aa9887" ng-checked="port.checked" ng-disabled="port.disabled" ng-click="getSelectedPorts($event,port);
submenu.network.minimizeMaximizePops($event)">
JS
var cb = element(by.css('#port32201295-a833-45ea-8268-7c4bc0aa9887'));
cb.click() // failed(element is not visible | but element is visible have height & width)
browser.actions().mouseMove(cb).click().perform();// nothing happens
Alternatively you can use to click a check box by using element(locator).click()
function setCheckBoxTo(locator, value){
var checkbox = element(locator);
checkbox.isChecked().then(function(selected){
if(selected !== value){
checkbox.click();
}
}
}
Reference here author
Fixed this issue by removing custom styles form checkbox,in my case the real checkbox is override by checkbox look like div , because of this element is not visible for protractor , this happens only in case of check-boxes because i am also using select2.js for select boxes.
I need to manually select a dropdown option if a value is matched. Here is the code:
if($("#hiddenMyField").val() != "") {
$("#dropdown").each(function(i){
$('option', this).each(function() {
if($(this).html() == $("#hiddenMyField").val()) {
// code to select the option
} else {
alert('not matched');
}
});
});
}
How can I select the current option located in the drop down if that if condition is met?
Thanks
Options have a selected property:
this.selected = true;
$(this).attr('selected', true);
should do the magic.
All right I managed to find a workaround for this.
Since the options were being translated to divs with checkboxes with the ui.dropdownchecklist.js I first loaded the multiple dropdown with its normal view, then selected the necessary items with the this.selected = true and then I loaded the ui.dropdownchecklist.js function so the items will be translated back to divs with checkboxes. The user doesn't even see the actual multiple checkboxes so this worked out well for me. When they are translated to checkboxes, the selected items are kept and are also ticked when they are transferred.
Okay, so I'm trying to change a checkbox's state programmatically in dashcode. I've tried:
var checkbox = document.getElementById("checkbox");
// I have tried all the following methods.
checkbox.checked = false;
checkbox.selected = false;
checkbox.value = false;
Dashboard Widgets just run on WebKit technologies, so code valid for Safari should also be valid in Dashcode. Either of the following should work:
checkbox.checked = true;
checkbox.setAttribute("checked", "true");
The fact that they are not working indicates there is a problem elsewhere in your code. I would check the line
var checkbox = document.getElementById("checkbox");
Correctly assigns an element to the checkbox variable. Also, check the id of your "checkbox" element is valid and correct (not a duplicate, doesn't have a typo, etc).
This question is one month old as I write this answer. It was probably already solved, but in any case I would like to add that if you are using Dashcode, the Checkbox part is a div which contains one label and one input, this one being the "real" checkbox.
If you inspect the html as it is loaded in Safari you will notice that "checkbox" is the type of the element.
Therefore the proper way to change the state of the checkbox would be, assuming "input" is its id (it could have a default number attached though):
document.getElementById("input").checked="true";
or whichever method you want to use.
The main point here is that you were trying to change the state of another div.
Hope it helps!
checkbox.setAttribute("checked", "checked"); // set
checkBox.removeAttribute("checked"); // remove
This question has been around a while. Regardless, the following works for us:
checkbox.childNodes[1].checked = true;
checkBox.childNodes[1].checked = false;
As pointed out in a previous answer, the way Dashcode creates these controls you need to get past the div wrapper, which has the actual ID (checkbox in this example) and set the property for the input, which is child node 1.
Looking for the actual 'id' of the input would be problematic as you have no control over what id's are assigned to the node. For example if you have two checkboxes then the first one would have 'input' as the id for child node 1 and the second one 'input1', unless, of source you have used 'input' or 'input1' as an id somewhere in your design already!
There might be another method but I have not found it yet.
I don't know which browser you used, but when I tested on FF 3.6, it works.
just put like this:
checkbox.checked = false;
while:
checkbox = document.getElementById('blablabla');
or write like that
document.getElementById('idhere').checked = false;
Maybe:
checkbox.checked = "checked";
Then:
checkbox.checked = "unchecked";
cell = row.insertCell(-1);
sel = document.createElement('input');
sel.setAttribute("type", "checkbox")
sel.setAttribute("name", "myCheckBox")
cell.appendChild(sel);
cell.getElementsByTagName('input')[0].checked = true;
I create a table, row then cell and create a checkbox within it.
I can the grab hold of the first input object and set the checked status to true.
var checkbox = document.getElementById("checkbox");
there is a problem with this line, it should be
var checkbox = document.getElementById('#checkbox");
I am trying to bring up a menu when any of the checkbox is selected, as you can see in screenshot below, it shows the number of selections and the menu also disappears when none is select.
I am able to bring up the menu with this code
$("input[name='id[]']").focus(function(){
$("#menu").fadeIn();
});
However, i dont know how to hide it when the checkboxes are unselected and how to count number of selections.
Thank You.
When you check a checkbox, the focus or click event will be triggered. You can count the checked checkboxes with
$("input:checked").length;
If you use that number to hide your menu it should be possible:
$("input[name='id[]']").click(function(){
if($("input:checked").length > 0) { //checked boxes?
if($("#menu:visible").length == 0) { //menu not visible?
$("#menu").fadeIn();
}
} else {
$("#menu").fadeOut();
}
});
To count the number of selections you can use:
$("input[type='checkbox']:checked").length;
So..
$("input[type='checkbox']").click(function(){
if ($("input[type='checkbox']:checked").length < 1)
$("#menu").hide();
});
$("input[name='id[]']").focus(function(){
if ($(this).is(':checked')){
$("#menu").fadeIn();
}else{
$("#menu").fadeOut();
}
});
This should do what you need,
EDIT:
Your selector doesn't seem alright though. You should make it more specific.
for example:
if it starts with id[ you can do it in this way:
$("input[name^=id\\[]")
this will include all input fields their names starting with 'id[' and '\' this is for escaping this '['.
Hope it helps, Sinan.