I have created a multi selection select control using Bootstrap select.
By default I need to show dynamically selected items. When I make selected in option ALL selection (<option value="All" selected >All</option>) by default it shows selected in UI. But when do for one option selected its not shows the tick.
Demo is here: https://jsfiddle.net/sharmilashree/L7wzv5k0/10/
(i.e)
<option value="All" selected >All</option>
<option value="EC" selected>EC (Early Childhood)</option>
I suspect the issue is as you commented, here:
$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('change');
If you drop the trigger('change') it works as expected:
https://jsfiddle.net/Twisty/3pfq5u41/
I guess my question is why trigger a change event? Really, I would think that you only want to execute toggleSelectAll() when the "All" value is selected.
Perhaps something like: https://jsfiddle.net/Twisty/3pfq5u41/2/
Hope that helps.
Wrong event selection:
Replace
$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('change');
to
$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('select');
Check for "undefined" as well.
if (control.data('allOptionIsSelected') != allOptionIsSelected && typeof(control.data('allOptionIsSelected')) != "undefined")
{
And you are done!
Happy Coding.
Related
I'm looking for an effective way to enable / disable multiple controls (textarea, checkbox) through dropbox. I.e. Selecting item A in dropbox will disable certain controls, while selecting item B in dropbox will disable some other controls. Codes on how I approach with disabling textbox:
HTML:
<template name="Gender">
<input disabled={{shouldBeDisabled}} class="input" type="text"/>
</template>
<template name="DoB">
<textarea rows="3" cols="27" disabled={{shouldBeDisabled}}>purpose</textarea>
</template>
js:
Template.registerHelper("shouldBeDisabled", function() {
return true
});
Question 1: Do we require a registerHelper function for each individual control? In the code above it seems like the registerhelper will either disable or enable both control as oppose to individual, but having multiple registerhelper seems redundant.
Question 2: How can we control the value in registerHelper via dropbox (i.e. select)? I can return the value from the dropbox, is building a switch inside registerhelper the correct way and how does it incorporate into question 1?
Question 3: Is there a build-in function to add visual effect on disabled controls? (i.e.grey out)
The way I have done this in the past w/ Meteor and Blaze is to setup a event listener on the dropdown that sets a reactive var/session variable that I then read in a helper. The helper would return the string "disabled" depending on the value.
For instance (this is from memory...I don't have access to Meteor right now, and I have switched over to React/Mantra):
Template.MyComponent.oncreated(function() {
this.isDropdownDisabled = new ReactiveVar();
});
Template.MyComponent.events({
'change #myDropdown'(event) {
this.isDropdownDisabled.set($('#myDropdown').val() == 'Selected' ? true : false);
}
});
Template.MyComponent.helpers({
isDropdownSelected() {
return this.isDropdownDisabled.get() == true ? '' : 'disabled';
}
});
<select id="myDropdown">
<option value="Not Selected">Not Selected</option>
<option value="Selected">Select Me</option>
</select>
<input id="myDynamicallyDisabledInput" type="textbox" name="dnyamic1" {{isDropdownSelected}} />
That should roughly be correct. Basic idea is that you use a reactive var to store the "state" of the dropdown value, flip the "state" when that value changes, and use a help in the inputs to determine if the disabled attribute needs to be set or not. Since helper functions are reactive by default, swapping the state var will cause the template to re-evaluate any time the dropdown value changes.
Anyone can feel free to edit this response to clean up any bad code above, as again I haven't used Blaze in some time and I did this all from memory.
I need to get the last selected value from a dropdown control. But I get wrong information.
I need this kind of control to allow users to select every option they want. But I've to validate every option they select after getting the selectedvalue.
I've deployed an ASP.NET dropdown control in a webform. It's databinded in server side, and the resulting hmtl is the following:
<select name="ddl" id="ddl" multiple="multiple" data-native-menu="false">
<option value=""></option>
<option value="1">1800346</option>
<option value="2">1800353</option>
<option value="3">1800358</option>
<option value="4">1800509</option>
<option value="5">1800514</option>
</select>
And this is my jQuery code: It alerts the selectedIndex and the selected text.
$("#ddl").on("change", function () {
alert($("#ddl")[0].selectedIndex);
alert($("#ddl option:selected").text());
});
With alert($("#ddl")[0].selectedIndex) I get the first selected index. For example, if you click on the first checkbox, you'll get "1" the first time. After that, if you click on the third checkbox you'll get "1" again (instead of "3"). Because the first option is selected.
I also tried with alert($("#ddl option:selected").text()) but I get everything.
Is there any way to get only the last selected value? I'm only able to get the first selected index.
You can find my code also here: http://jsfiddle.net/bDvkQ/342/
Any help will be very welcome,
Regards,
Check for this code
$("#ddl").on("change", function () {
var lastText = "";
var last = 0;
$("#ddl option:selected").each(function () {
lastText = this.text;
last = this.value;
});
alert(lastText);
alert(last);
});
and you can find from this link to http://jsfiddle.net/bDvkQ/344/
I think it wasn't clear for you.
When you click on the ddl, it will choose the selected value. Just return it.
Do something like this:
$("#ddl").on("change", function () {
alert($("#ddl").val());
alert($("#ddl option:selected").text());
});
It works well for me.
Hope this helped.
Here is how we can select the last selected value (and first one),
$("#ddl").on("change", function () {
var selValues = $("#ddl").val();
alert(selValues[0]);
alert(selValues[selValues.length - 1]);
});
However, if user starts selecting values in the reverse direction (from bottom), you will not get the last selected/clicked value but you will always get the selected value that comes last in the dropdown.
I would suggest to create another function/handler that gets all the selected values and validates them one by one rather than doing validation on every single click/selection of this multi select control.
Can a checkbox in Contact Form 7 (Wordpress plugin) be disabled?
I have a group of 5 checkboxes, and I want one to be there, but disabled (not clickable, not selected).
How to do it?
Add an id to your to your checkbox. It will look something like this, it is important that the id is after the variable as shown below.
[checkbox variable id:disablethis "variable"]
This will put the id "disablethis" on the span tag that surrounds your checkbox (input) that you are trying to disable. Then we can simply find that span and disable all of the inputs within it like so. Put this at the bottom of your form/page.
<script>
$("#disablethis :input").attr("disabled", true);
</script>
you can disable it by using jQuery like this :
jQuery('#checkbox').attr('disabled','disabled');
where #checkbox is the ID of checkbox.
Thanks a million ImTheMechanic! I was looking for a few days how to reference the checkbox and set its state (checked or unchecked).
I had to put :input after the id.
I could never have guessed!
I did it like this:
if (dayNameB == "zaterdag") {
$("#brengtijdzat").show();
$("#brengtijdzat :input").prop("checked", true);
$("#brengtijd").hide();
$("#brengtijd :input").prop("checked", false);
}`
Thanks!
In code-behind I can do this to select something:
// Select item in first DropDownList
myCascadingDropDown_1.SelectedValue = itemValue_1+":::"+itemText_1;
// Select item in second DropDownList
myCascadingDropDown_2.SelectedValue = itemValue_2+":::"+itemText_2;
How can I do this in JavaScript?
(I'm aware, that I could search the list and set the selectedIndex property for each dropdown, but I have many items and i'm very lazy.)
EDIT:
npups answer works: I can select my desired item in the first dropdownlist. The problem is however, that new values based on that selected item (it is a CascadingDropDown, remember?) don't show in the second dropdown so I can't select anything there. I would need to somehow invoke the update method of the second dropdown manually: any suggestions?
I was able to solve this:
1) With npups suggestion I was able to set "myCascadingDropDown_1" to my desired value.
2) Using the
myCascadingDropDown_2.CascadingDropDownBehavior._onParentChange(null,
null);
method I was able to force the second dropdown to repopulate based on the new selected value of "myCascadingDropDown_1".
3) I wrote a timer to check periodically if the second dropdown has finished repopulation and set the desired value if it has (again using npups answer)..
Check this out:
<select id="foo">
<option value="bar">bar</option>
<option value="baz">baz</option>
<option value="bork">bork</option>
</select>
<script type="text/javascript">
var selectElem = document.getElementById('foo');
selectElem.value = 'baz';
</script>
Setting the value of the select element fixes that.
Firefox gets it right even if you just use the tags' content as values (instead of specifying a value in the option's value attribute). Not sure about other browsers.
EDIT, more stuff:
So there is some other select (or equivalent) that is updated by some harmonizing function when the first select changes?
Here, i have it in the first select's onchange. When the selected element is set with this "value-setting" technique, the onchange isn't triggered. Though, one can call the harmonizing function manually when you change the first select. I show two different ways (both in comments) below.
<select id="foo" onchange="harmonize();">
<option value="bar">bar</option>
<option value="baz">baz</option>
<option>bork</option>
</select>
<select id="foo2">
<option value="0">This</option>
<option value="1">That</option>
</select>
<script type="text/javascript">
var select0 = document.getElementById('foo');
var select1 = document.getElementById('foo2');
select0.value = 'baz';
// alternative 1: call harmonize();
// alternative 2: call select0.onchange();
function harmonize() {
if (select0.value==='baz') {
select1.value = '1';
}
else {
select1.value = '0';
}
}
</script>
I didn't bother to hide global variables etc. here, but of course that is a good idea.
you can also use myCascadingDropDown_2.set_SelectedValue(resultval, resultVal) instead of timer (item3)
I have a dropdownlist which has several options for generating reports. Based on the type of account the user has certain options which should be visible but not selectable (as an incentive for them to upgrade).
I was wondering if anyone knew of a way to accomplish this.
The permissions are already in place i just need assistance with making certain items unselectable.
Any help would be much appreciated.
Not sure if you are still looking for an answer for this?
Mark Redman's answer is great if you can define the select list in the aspx page, however if you bind the drop down list dynamically obviously you cannot.
I had success using the following to achieve the result you are after (not sure on full browser support but works in newer versions of IE)
foreach ( ListItem item in dropdownlist.Items )
{
if ( [item should be disabled condition] )
{
item.Attributes.Add( "disabled", "disabled" );
}
}
This will render your disabled elements greyed out.
You can disable an <option> tag in an html <select>
See: http://www.htmlref.com/reference/appa/tag_option.htm
in asp.net:
<asp:DropDownList ID="MyDropDownList" runat="server">
<asp:ListItem Text="Standard Report" Value="SR"></asp:ListItem>
<asp:ListItem Text="Enterprise Report" Value="ER" disabled="disabled"></asp:ListItem>
</asp:DropDownList>
You can use a required field validator and set the initial value property to the value of the item in the drop down list you do not want selectable.
<asp:RequiredFieldValidator ID="RequiredFieldValidator" runat="server"
ErrorMessage="" ControlToValidate="DropDown" InitialValue="Unselectable Item"></asp:RequiredFieldValidator>
You could try this
myDropDownList.Items.FindByValue("ReportValue").Attributes.Add("disabled", "disabled");
I had this same problem and tried to use the first answer posted, but it didn't work for me. I then changed the first post to:
foreach ( ListItem item in dropdownlist.Items )
{
if ( [item should be disabled contdition] )
{
item.Enabled = false;
}
}
and it worked for me.
Adam Fox is absolutely correct with this snippet:
foreach ( ListItem item in dropdownlist.Items )
{
if ( [item should be disabled condition] )
{
item.Attributes.Add( "disabled", "disabled" );
}
}
The only caveat is that it needs to be called in the OnDataBound event, and not the OnDataBinding event (this is too early in the lifecycle).
You could do this client-side with a handler that is triggered when an item is selected. Then unselect the item and/or display an error message.
If this is HTML control, then its very easy to make it UNselecteable. just use the "optgroup" HTML element. e.g.
<select>
<optgroup label="Hardware"></optgroup>
<option id="1">mouse</option>
<option id="2">keyboard</option>
<option id="3">monitor</option>
<optgroup label="Software"></optgroup>
<option id="Option1">windows XP</option>
<option id="Option2">MS Office</option>
<option id="Option3">VStudio</option>
</select>
(NOTE : this works in both IE/firefox)
Thanks
Sushil Jinder
Try this
myDropDownList.Items.FindByValue("ReportValue").Enabled = false;
This will disable the item from the list by basically not showing it in the list.
"ReportValue" = the value of the item to be disabled.