Solved

jQuery: Disable select options where value begins with xyz

Posted on 2013-10-28
5
516 Views
Last Modified: 2013-10-28
Using jQuery, how can I disable all select options that begin with "xyz"?

In this example, only the last 3 options should be disabled:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">

option:disabled {
background: red;
opacity: 0.3;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

 $('#xyz option').prop('disabled',true)

});
</script>

</head>
<body>
 <div>
  <select id="xyz">
   <option value="xyz">xyz</option>
   <option value="abc">abc</option>
   <option value="123" selected="selected">123</option>
   <option value="xyz1">xyz1</option>
   <option value="xyz2">xyz2</option>
   <option value="xyz3">xyz3</option>
  </select>

 </div>
</body>
</html>

Open in new window

0
Comment
Question by:hankknight
  • 3
  • 2
5 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39605418
$('#xyz option').each(function(){
  var val=$(this).val();
  var n=val.substring(0,3);

  if(n=='xyz'){
   $(this).prop('disabled',true); 
  }

});

Open in new window

http://jsbin.com/ELArIwI/1/edit?html,js,output
0
 
LVL 14

Accepted Solution

by:
Pierre Cornelius earned 500 total points
ID: 39605439
or

change
$('#xyz option').prop('disabled',true)

Open in new window


to
$('#xyz option[value^="xyz"]').prop('disabled',true)

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39605469
I'm sure we can come up with even more multiple permutations of the same answer.  PierreC, what is the  point of changing to that permutation?  Is it better? or just different?
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39605486
you tell me, padas.

What is easier?
adding "[value^="xyz"]" to already exisiting code

or reinventing the wheel?

Is it better to
ask JQuery for a list of items and then finding those we are interested in, or
ask JQuery for the list we are interested in
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39605521
Good point
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question