Solved

jQuery: Disable select options where value begins with xyz

Posted on 2013-10-28
5
512 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
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)

777 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