Grey out a select option based on xml file

Question

I have an XML file like this

<?xml version="1.0" standalone="no" ?>
<Reading>
<Item Time="17:35">
    <SlaveAddress />
    <Slave_4 Value="0" />
    <Slave_3 Value="0" />
    <Slave_2 Value="0" />
    <Slave_1 Value="1" />
</Item>
</Reading>

and my dropdownlist look like this

<select id="comboBox" style="width:100px;" tabindex="1">
 <option value=""></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
</select>

Is it possible to grey out any of <select> <option> based on of that XML file? Meaning if Slave_1 's value is 1 then the <option> 1 is enabled and if Slave_2 is 0 then <option> 2 is then disabled or greyed out.

Then the user can make their choice based on any enabled option.

I would love to have any input from you out there. Javascript or JQuery doesn't matter.

Answer 1

Something like this should do the trick. Parse the xml, mjQueryfy it, the go through it, get the correct stuff out and disable or enable as needed

var xml = $.parseXML('your_xml_as_a_string_or_whatever');
var $xml = $(xml);

$xml.find('Item').children().each(function(index, value) {
  var $this = $(this);
  var tagName = $this.prop('tagName').toLowerCase();
  if (tagName.indexOf("slave_") === 0) {
    var value = $this.attr('Value');
    var number = tagName.slice(-1);
    if (value === '0') {
      $('option[value="'+number+'"]').attr('disabled', 'disabled');
    } else {
      $('option[value="'+number+'"]').removeAttr('disabled');
    }
  }
});