We Keep Coding

Not able to disable a multi-select drop down

Hi I am new to AngularJs. Here my problem is on a certain condition I need to disable my multiselect dropdown.
So, I made the logic and on with the help of I tried to disable the dropdown-
document.getElementById("multidropdown").disabled = true;
But no luck.
So, then I google it and get to know about ng-disable. So, I put a ng-disable there and give it a name like this
ng-disabled="makeItDisabled"
And in my js file, I set
$scope.makeItDisabled = false
And in the condition, I made the same
$scope.makeItDisabled = true
But still got no luck.
This is my HTML-
column type="dropdownMultiSelect" styleName="form-control ng-isolate-scope multidropdown" ng-dropdown-multiselect="" options="dropdownData" selectedmodel="dropdownelect" extrasettings="multiselectsettings" events="DropDown_changed" text="" uniqueID="multidropdown" ng-disabled=" makeItDisabled
This is my js code which I have tried
document.getElementById("multidropdown").disabled = true;
and also
$scope.makeItDisabled = true;
I did the same with the disabled also but there also I was not able to do it. I want to know where I am getting it wrong.
I am using this
https://github.com/dotansimha/angularjs-dropdown-multiselect

Finally I was able to do it by just using css
I disabled the dropdown by using
pointer-events:none;

Try this:
<ng-multiselect-dropdown
[placeholder]="' '" [data]="myList"
[(ngModel)]="mySelectedItems" [settings]="mySettings"
(onSelect)="onItemSelect($event)" (onDeSelect)="onItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)"
[disabled]=!isToDisable()>
</ng-multiselect-dropdown>

Use ng-disabled not ngdisabled and it should work. Post further if you have any queries

Am I using `button.disabled = true;` incorrectly?

I'm trying to build an interaction in Animate CC that plays movie clips, and the buttons disappear after they are clicked.
I'm trying to disable the other buttons temporarily while the movie clip plays over the main background, but it's not playing nice.
A code Snippet of the click handler:
exportRoot.btn_cook.addEventListener("click", cook_clickHandler.bind(this));
function cook_clickHandler(){
exportRoot.cook.gotoAndPlay(1); //play the info clip
exportRoot.btn_cook.visible = false; //hide button for no replays
disableAll();
}
disableAll(); does the following for each button on the canvas:
if(exportRoot.btn_receive.visible == true){
exportRoot.btn_receive.disabled = true;
}
I'm having some trouble trying to figure out how to use this properly. When I run through the interaction, I am still able to click on the buttons, even though I supposedly disabled them?
This demo won't load sound on GitHub, but it works otherwise. Click here to see it.

I had the same problem so I have another way to do it:
You can try to remove the eventListener click, like this:
if(!exportRoot.btn_receive.hasEventListener("click")){
exportRoot.btn_receive.removeEventListener("click", cook_clickHandler);
}
When u want this to be enabled again, add the eventListener.

The disabled attribute is a Boolean attribute. That means that just the presence of it is enough to cause the element to become disabled. It makes no difference what you set the value to. You need to remove the attribute from the element to remove the disabled effect.
Removing the event listener treats the symptom, it doesn't get to the heart of the issue.
Also (FYI), the visibility property gets values of "visible" or "hidden", not true or false.
Here is a simple example of how to apply and disable (no pun intended) the disabled attribute:
btnToggle.addEventListener("click", function(){
var elems = document.querySelectorAll(".disableEnable");
// Loop through each element in the class
elems.forEach(function(element){
// Check to see if the first element has the disabled attribute
// the value of the attribute doesn't matter. If the attribute
// is present, the element is currently disabled.
if(element.getAttribute("disabled")){
// Element is disabled, so enabled it by removing
// the attribute (not by setting a value)
element.removeAttribute("disabled");
} else {
// Element is enabled, so disable it by adding the disabled
// attribute. Again, the value doesn't matter, but convention
// says that we set a value of "disabled" to convey that it is
// a boolean attribute.
element.setAttribute("disabled", "disabled");
}
});
});
<button id="btnToggle">Disable / Enable</button>
<button class="disableEnable">Test Button</button>
<input class="disableEnable">
<input type="text" class="disableEnable">

Hide a button until check box is checked, without ID

I need to hide a button until a check box is clicked, however I am stepping into someone elses code who used tag libraries that did not define ID in the button tag. Here is what I have:
The button code:
<html:button name="Next" value="BTN.NEXT" styleClass="button" localeCd="<%= localeCd %>" onClick='Submit("Next")'/>
The checkbox code:
<input type="checkbox" name="fedCheck" onclick="checkFed(this, 'myNext')" value="y" />
The Javascript Code
function checkFed(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;
}
I can get this to work in a seperate page but the page that it is on does not allow for the button to have an ID so it crashes every time. Any suggestions?

There would be better ways of doing this, listening for the click event, etc... but, to simply modify your code see this jsFiddle (note: this assumes this is the only element named "Next"):
function checkFed(ele, name) {
x = document.getElementsByName(name)[0];
x.disabled = !x.disabled
}
And change the onclick="checkFed(this, 'myNext')" to:
onclick="checkFed(this, 'Next')"
And add disabled="true" to the button so that it's initial state is disabled
...also note that this doesn't actually hide it like the title asks, it disables it, like the content of the question seems to ask.

Instead of finding the button using document.getElementById, use document.querySelector.
For example, if you have a single button on the page with "Next" as the value of its name attribute:
document.querySelector('button[name="Next"]')

How to enable a disabled text field?

I wanna know how do I enable a disabled form text field on submit. Also I wanna make sure if user goes back to form or click reset field will show again as disabled.
I tried to use
document.pizza.field07.disabled = false ;
It does disables the field, by clicking reset or hitting back button still keeps it enable.
Please guide.

To access this element in a more standard way, use document.getElementById with setAttribute
document.getElementById("field07").setAttribute("disabled", false);
EDIT
Based on your comment, it looks like field07 is a name, not an id. As such, this should be what you want:
var allfield7s = document.getElementsByName("field07");
for (var i = 0; i < allfield7s.length; i++)
allfield7s[i].setAttribute("disabled", false);

That is the only working solution for Me:
var allfield7s = document.getElementsByName("field07");
for (var i = 0; i < allfield7s.length; i++)
allfield7s[i].removeAttribute("disabled");

You can enable a disabled html control with the following JavaScript code.
document.getElementById('elementId').removeAttribute('disabled');

You can also do this with jQuery:
$(function(){
$("[name='field07']").prop("disabled", false);
});
We simply select all the elements where the name attribute is field07 (using name because you said so in the comments of #AdamRackis's answer) and set its disabled property to false.
More about prop().

You can enable a disabled html control(like, input, textarea, button,...) with the help following code.
To disable:
document.getElementById("id_name").setAttribute("disabled", true);
To enable:
document.getElementById('id_name').removeAttribute('disabled');

JQuery - Form Reset - Exclude "Select" box

All,
I can reset all my form elements using the following JQuery Syntax:
('#myform')[0].reset();
How can I modify this to exclude the reset of "select box" values?
Thanks

To everyone..
the reset function does not set everything to '' (empty string)
it reset to their initial values .. (stored in the value attribute, or selected option etc..)
If you want to maintain the default reset features then you should
get all the <select> elements
get their currently selected values
reset the form as you currently do
re-set the selected
example:
<script type="text/javascript">
$(document).ready(
function(){
$("#resetbutton").click(
function(){
var values = [];
var selected = $("select").each(
function(){
values.push( $(this).val());
});
this.form.reset();
for (i=0;i<selected.length;i++)
$(selected[i]).val(values[i]);
});
}
);
</script>

That's not jQuery, it's native javascript. [0] brings out the actual DOM element, so it's the same as:
document.getElementById('myform').reset();
reset() is a built-in browser implementation that resets the entire form. If you need to reset individual form types, try something like:
$('#myform :text').val('');
You can see all form selectors here: http://docs.jquery.com/Selectors

You can do a fake reset by setting the values to an empty string and resetting the checkboxes using David's answer (or this more complete one). You could also try storing each select element's value before resetting the form and then restore the values after:
var myform = $('#myform');
var selects = $('select', myform);
// Store each current value
selects.each(function() {
$(this).data('previous', $(this).val());
});
myform[0].reset();
// Restore the values
selects.each(function() {
$(this).val($(this).data('previous'));
});

For whatever reason, David's right-on answer error'd my Google Chrome js. It's saying:
Uncaught TypeError: Property 'reset' of object # is not a function
...so I decided to try a slightly different solution:
Give native browser reset buttons attributes "hidden" and set "id":
<input id="resetbutton" type="reset" style="visibility:hidden;" name="reset" value="reset" />
Initiate JQuery "click" event on reset button from clicking link:
Reset