Disabling the select tag field - javascript

I'm having trouble figuring out how to disable a select tag but keeping the selected value visible. The only solution I've found was to remove the items that should not be displayed. The use is that when a user created a new item and selects an option, the people viewing the created item should not be able to change it. Greying out text boxes has proved to be pretty simple but I don't know how to proceed with select tags.
This is how I do it right now but not exactly since this code follows a progression and gives editors different options depending on the stage they're in. However, other choice fields won't change through the process, they just need to remain what they were on creation.
//On item edit, set status to In Progress if in New
if($("option[value='New']").attr("selected") == "selected"){
//Disable New/Completed/Cancelled
$("option[value='New']").remove();
$("option[value='Completed']").remove();
$("option[value='Cancelled']").remove();
//Enable In Progress
$("option[value='In Progress']").attr("selected","selected");
//Call Claim WO Function
claimOrder();
}else if($("option[value='In Progress']").attr("selected") == "selected"){
//Remove New option
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").attr("selected","selected");
}else if($("option[value='Completed']").attr("selected") == "selected"){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Cancelled']").remove();
}else if($("option[value='Cancelled']").is(':selected')){
//Remove New/In Progress option when Completed/Cancelled
$("option[value='New']").remove();
$("option[value='In Progress']").remove();
$("option[value='Completed']").remove();
}

what about disabling like this
box.attr('disabled', 'disabled')

Related

Dynamically disabling <option> elements based on amount selected

I have provided a user with an interface where they can select from 30 options(hardcoded), displayed in a bootstrap dualListBox.
This works perfectly however I would like to set the max amount of options that can be selected to 10.
After which, all the options that could have been selected on the left side, become disabled.
Should the user remove a selected option, the others can then become available for selection again.
I realize that I will be using jquery to achive this, however I am unsure as to how I will count the amount selected and how I will target remaining selections to disable or make them available again.
Is there any advice on how to correctly solve this problem?
The plugin I am using for the dual listbox can be found here:
Bootstrap dualListBox
First I would bind a change event, then I would check if the number of selected items is equal or exceeds then max number of elements, if so I will disable it.
If I understand your question correct it would be something like:
$('#selector-id').on('change', function(e){
var selectedElements = $(this).val();
if(selectedElements && selectedElements.length >= 10){
$(this).prop('disabled', true);
} else {
$(this).prop('disabled', false);
}
});
(This is not tested code)

Changing the selected text of a select box in javascript

I have a function where if the user changes an IP to be unallocated in the select box, an alert will pop-up that asks if they are sure, on cancelling this alert I want the select2 box to change back to the original status (i.e allocated etc.).
I have been able to change the value of the select2 box by storing the original value in a variable and then assigning it to the value of the select on cancelling the alert
else
$('#ip_status').val(original_status)
However although this DOES change the value of the select2 box meaning the functionality is working, the text in the select2 box stays 'unallocated' giving the end user a misleading value. Keep in mind that .text(" example ") does not work.
Thank you.
Full Code -
original_status = document.getElementById('ip_status').value
$('#ip_status').change ->
# If the user changes ip status to unallocated, clear and hide system name and description fields.
if parseInt($('#ip_status').val()) == 0
r = confirm("You are about to unallocate this IP! Are you sure you want to do this?")
if r == true
$('#ip_description').val("").parent().hide()
$('#ip_system_name').val("").parent().hide()
else
$('#ip_status').val(original_status)
else
# if the select changes to allocated or reserved, re-show the fields that were hidden
$('#ip_description').parent().show()
$('#ip_system_name').parent().show()
You have to use something like:
$( function() {
$("#your_option").attr("selected", "selected");
});
I was able to fix this by changing
$('#ip_status').val(original_status)
to
$("#ip_status").select2("val", original_status)

Disable toggle switch in Javascript

This script is designed to map the location between two cubicles so that people in large office buildings can figure out where they need to go to get to that other person. I've almost got it...
I have two different dropdown menus I'm working with.
By default, the dots on the page display.
Each dot corresponds to a name on the dropdown list.
When you select the name under the first dropdown, the other dot will disappear, and then if you select the name under the other dropdown, the first one disappears.
What I want to happen is - When both names are selected from the dropdowns, then both dots are showing at the same time.
I can get one or the other, but not both.
Here's the JS I have to toggle between the two...
$('#mapMe').change(function() {
var selectedMeChoice = $('#mapMe option:selected').val();
if (selectedMeChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[mechoice = "'+selectedMeChoice+'"]').slideDown(1000);
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
}
});
$('#mapThem').change(function() {
var selectedThemChoice = $('#mapThem option:selected').val();
if (selectedThemChoice == 'ALL'){
$('a.dot').slideDown(1000);
}else{
$('a.dot[themchoice = "'+selectedThemChoice+'"]').slideDown(1000);
$('a.dot[themchoice != "'+selectedThemChoice+'"]').slideUp(1000);
}
});
I think it has something to do with the slideUp/slideDown function, but I can't figure it out...
There's a jsfiddle here.
You aren't distinguishing between "them" and "me" in any way, so you're hiding the other one which should be shown. Try something like this, to only hide the correct dots:
$(".me").removeClass("me");
$('a.dot[mechoice = "'+selectedMeChoice+'"]').addClass("me").slideDown(1000);
$("a.dot").not(".me, .them").slideUp(1000);
http://jsfiddle.net/XvHJS/10/
In this way you will hide only a previous "me" and not hide everything, including an active "them".
$('a.dot[mechoice != "'+selectedMeChoice+'"]').slideUp(1000);
Is also removing those which have no memchoice at all, including those with themchoice.
I would suggest using different classes dotme and dotthem instead.

How to check with javascript if a drop down has 2 or more options to select?

I have a text box that is already showing, but I also have a select box where the user can select a building, and it will show another select box with more options depending on which building the user chose. The second select box always has the option new
My problem is that if the user selects a certain building from the select box, the program has to check if the building has more options besides from the newoption, and if it has, then the text box should disappear, but if the building only has the new option, then the textbox must stay there, and the second select box needs to disappear.
I tried using something like:
if (secondbox.length==1){
secondbox.style.display='none'}
but it works after I changed to another building instead of working instantly.
Javascript:
if (comm.length == 1){
comm.style.display='none';
comm.disabled=true;
comm.value='';
comm.style.visibility='hidden';
textNumber.style.visibility='visible';
textNumber.disabled=false;
textNumber.focus();
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Add';}
else {
comm.style.display='';
comm.disabled=false;
comm.style.visibility='visible';
textNumber.style.visibility='hidden';
textNumber.disabled=true;
textNumber.value='';
textic.style.visibility='hidden';
textic.disabled=true;
textic.value='';
document.getElementById('btnComm').value='Update';}
}
Simply do:
if(document.getElementById("selectBoxId").childNodes.length >= 2) {
//The select box has 2 or more options...
}

Binding Buttons to several text boxes actived based on size of values in text box

I am building a site where people can customize the shape of their product before they order it.
Ultimately there will be several buttons bound to four text boxes. As the user inputs higher values in the text box, the button that is activated changes so we know what size sheet of material will need to be ordered for this customer's design.
How can I create a button that is enabled/disabled based on the value placed in a text box?
You can use jQuery and try something like this:
First, give your buttons an attribute disabled="disabled", and then:
//Assuming they are typing, if it's a dropdown/select, see below
$('#input-id').on('keyup', function() {
if($(this).val() >= 10 && $(this).val() <= 20) { // If the value is between 10 and 20...
$('#button-id').removeAttr('disabled'); // Remove disabled attribute
} else { // If the value is not our keyword...
if(!$('#button-id').attr('disabled')) { // And the button is not disabled...
$('#button-id').attr('disabled', 'disabled'); // Readd disabled attribute
}
}
});
If you are using a dropdown or select box, use $("select option:selected").

Categories