?
Solved

jQuery: Disable select options where value begins with xyz

Posted on 2013-10-28
5
Medium Priority
?
530 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 54

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 2000 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 54

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 54

Expert Comment

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

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Question has a verified solution.

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

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…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…
Suggested Courses

600 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