how to disable select view in angular? - javascript

I want to disable the ui multiple select view whenever I select particaular value in my example "Nicole" .If I select "Nicole" it disable the ui select then user not able to select other option.
can we remove previous selected option when user select "Nicole" .? I want only if user select "Nicole" it disable the select view and remove other selected option .
plunker
http://plnkr.co/edit/eVXVzlRXJ4KUZaNjID6P?p=preview
$scope.OnClickSelect = function(item) {
$scope.multipleDemo.push(item.age)
}
$scope.OnRemoveSelect = function(item) {
var index = $scope.multipleDemo.indexOf(item.age);
$scope.multipleDemo.splice(index, 1);
}

I forked your plunker here.
index.html
I changed
ng-disabled="disable"
to
ng-disabled="isDisabled()"
demo.js
$scope.disabled = false;
$scope.OnClickSelect = function(item) {
if (item.name === 'Nicole') {
// Check to make sure there is a previous user to remove
if ($scope.multipleDemo.length > 0) {
$scope.multipleDemo.pop();
}
// Disable user picker
$scope.disabled = true;
}
$scope.multipleDemo.push(item.age);
}
$scope.isDisabled = function() {
return $scope.disabled;
}
Currently, when you select "Nicole" it disables the ui select picker and it removes the previously added user from the list multipleDemo. For some reason, it's removing the previously added user from multipleDemo list but it's not removing it from the UI. The digest cycle is not updating properly. Might it worth it to try it in your project to see if it gets updated properly there.
Hope this helps!

Modified OnClickSelect function call to OnClickSelect($item, $select) and added disabled in scope. $select variable will hepl us to manipulate the selected data.
use on-select="OnClickSelect($item, $select)" and ng-disabled="disabled" in ui-select tag.
$scope.disabled = false;
$scope.restrictNames = ["Nicole", "Michael"];
$scope.OnClickSelect=function(item, $select)
{
if($scope.restrictNames.indexOf(item.name) != -1){
$select.selected = [];
$scope.multipleDemo = [];
$scope.disabled = true;
}
$scope.multipleDemo.push(item.age);
}

Related

Switchery as radio button, cannot toggle back

Now making playlist using switchery checkbox,
and already make it like a radio button,
but it cant toggle back.
How can i make Switchery back to idle state / unchecked state ??
>>> my Fiddle Demo <<<
Here is my js :
$(document).ready(function() {
//switchery
var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch'));
elems.forEach(function(html) {
var switchery = new Switchery(html,{size: 'small',});
});
//detect change
$('input.pinmusic').on('change', function() { //detect change
// auto uncheck when selecting other checkbox
// but this is not working with switchery
$('.pinmusic').not(this).prop('checked', false);
});
});
PS : its already checked, but only switchery get stuck.
already browse some topic of switchery here but still error.
I'm late but, here's my solution:
var $switches = [];
var elems = Array.prototype.slice.call();
$.each(document.querySelectorAll('.js-switch'),function(i,html) {
$switches[html.name] = new Switchery(html,{size: 'small',});
});
$('input.js-switch').on('change', function () {
if (this.checked) {
$.each(document.querySelectorAll('input.js-switch:not([name="' + this.name + '"])'),
function (i, e) {
switcherySetChecked($switchers[e.name], false)
});
}
});
function switcherySetChecked(switcher, check) {
var curr = $(switcher.element).prop('checked');
var disabled = $(switcher.element).prop('disabled');
if (disabled) {
switcher.enable();
}
if (check) {
if (curr) {
$(switcher.element).prop('checked',false);
}
$(switcher.element).trigger('click');
} else {
if (!curr) {
$(switcher.element).prop('checked', true);
}
$(switcher.element).trigger('click');
}
if (disabled) {
switcher.disable();
}
}
It's pretty difficult to be sure of your problem, but if I understand well, you want to uncheck a radio button.
Well, you can't. A radio button is not made to be unchecked. The meaning of a pool of radio buttons is "choose exactly one of the following options". Unchecking a radio button would mean that the user chooses zero option, which is not allowed.
From Wikipedia's Radio button:
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options.
It is possible that initially none of the radio buttons in a group are selected. This unselected state cannot be restored by interacting with the radio button widget, though it may be possible through other user interface elements.
What you need to use if you want to be able to choose zero option, is a Checkbox.

Reset Select box when clicking on any other select boxes in jQuery

I read a few threads and they show these two codes can reset a select box.
$('#select2').change(function(){
$('#select1').prop('selectedIndex',0);
});
$('#select1').change(function(){
$('#select2').prop('selectedIndex',0);
});
Or
$(this).val("");
But I can't get a select box (fiddle) to reset to "Select" when clicking on any of the other select boxes. The code have the select boxes load content via data-file and redirect to other pages using value. Since I'm going to have more than 10 select boxes on a page, so perhaps using class would be better. I have tried the above methods but I either got error or the boxes always stay the "Select" option. Can anyone suggest some solutions?
Code:
var area = $(".selectboxarea");
$(".searchselectbox").on('change', function () {
area.empty();
var $this = $(this);
var selected = $this.find('option:selected');
var loadfile = selected.data('file');
if (loadfile) {
$this.next('.selectboxarea').html(loadfile);
$this.find('.select').text('Hide');
$this.find('.select').toggleClass('hide');
} else if (selected.hasClass('hide')) {
selected.text('Select');
selected.toggleClass('hide');
} else {
var url = $this.val();
if (url != '') {
window.location.href = url
}
return false;
}
});
$(".searchselectbox").not(this).prop('selectedIndex',0);
$('.select').text('Select');
JSFIDDLE

Highlight empty select box after alert

I have a site using input:text, select and select multiple elements that generate a text output on button click.
Having searched SO, I found examples of validation code that will alert the user when a select field returns an empty value-
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
$(this).addClass("highlight");
}
At the end, I tried to add a condition after the alert is dismissed, such that the offending select box will be highlighted by adding the 'highlight' class - but this doesn't do anything. My .highlight css is {border: 1px red solid;}
Any help here?
UPDATED WITH ANSWER - Thanks #Adam Rackis
This code works perfectly. I added a line to remove any added '.highlight' class for selects that did not cause an error after fixing
// alert if a select box selection is not made
var selectEls = document.querySelectorAll('select'),
numSelects = selectEls.length;
$('select').removeClass("highlight");//added this to clear formatting when fixed after alert
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
You were close. In your loop, this does not refer to each select that you're checking.
Also, you're returning false prior to the highlight class being added. You'll probably want to keep track of whether any select's are invalid, and return false at the very end after you're done with all validation.
Finally, consider moving your alert to the very bottom, so your user won't see multiple alerts.
var anyInvalid = false;
for(var x=0;x<numSelects;x++) {
if (selectEls[x].value === '') {
$(selectEls[x]).addClass("highlight");
anyInvalid = true;
}
}
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}
Also, since you're already using jQuery, why not take advantage of its features a bit more:
$('select').each(function(i, sel){
if (sel.value === '') {
$(el).addClass("highlight");
anyInvalid = true;
}
});
if (anyInvalid) {
alert('One or more required fields does not have a choice selected... please check your form');
return false;
}

How do I disable input field when certain select list value is picked

How do I disable and make the input field text to hidden when certain value is selected from select list? In my code, I need to disable and make the input text to hidden when "United States" is selected from my drop down.
My HTML:
JSFiddle Link
My Javascript:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none"
} else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block"
}
}
The problem with your fiddle is you have two elements with the same ID. You can do exactly what is already there, just change the ID on either the state dropdown or the text input. Updated code might look like this, if you simply name the text input the same with a 2:
document.getElementById('BillingCountryCode').onchange = function () {
if(this.value != '840') {
document.getElementById("BillingStateProvince").disabled = true;
document.getElementById("BillingStateProvince").style.display="none";
document.getElementById("BillingStateProvince2").disabled = false;
document.getElementById("BillingStateProvince2").style.display="block";
}
else {
document.getElementById("BillingStateProvince").disabled = false;
document.getElementById("BillingStateProvince").style.display="block";
document.getElementById("BillingStateProvince2").disabled = true;
document.getElementById("BillingStateProvince2").style.display="none";
}
}
If i got the question , simply invert the if condition like this :
if(this.value === "840") { ... }
here is the working fiddle : http://jsfiddle.net/antwonlee/cf4Sz/7/

Enabling 'Save' Button on index change

I have a popup with 1 dropdown list (mandatory), 1 datepicker (mandatory) & 1 textbox (optional). I am checking in 1st two that if they both contain any data and then I am enabling the 'Save' button.
However, if the user already has some dropdown item in it and date picked then also, the 'Save' button is enabled. I dont want this. So the logic here is:
Check the dropdown list and datepicker
If they both contain item in it & item has been changed then enable
the 'Save' button.
Else, disable the button.
Here is my code:
function EnableSaveButton() {
var tempDDL = jQuery("#testPopup SELECT");
var tempText = jQuery("#testPopup INPUT:text");
var buttons = jQuery("#testPopup INPUT:button");
jQuery.each(buttons, function (i, buttonCtl) {
if (buttonCtl.value.toLowerCase() == "save") {
if ((tempDDL.find('OPTION:selected').val() !== "-1") && (tempText.val() != ""))
buttonCtl.disabled = false;
else
buttonCtl.disabled = true;
}
});
}
Keep track of the dropdown selection on page load and after saves.
var ddlSelection = $('#testPopup select option:selected').val();
When the dropdown changes, check that the current selection is different.
if(tempDDL.find('OPTION:selected').val() !== ddlSelection)
If it is different enable the save button. On a save, update the dropdown selection variable.
ddlSelection = tempDDL.find('OPTION:selected').val()

Categories