Disable HTMLB dropdown with JavaScript

Question

Hi All,
I ran into the following issue:
I have a BSP page that used HTMLB dropdowns and some custom javascript that disabled those dropdowns interactively when a user clicked on a checkbox.
Example: tempDropdown.disabled = true;
Unfortunately, as soon as I changed the control rendering attribute to "SAP", the look&feel of dropdowns changed and they no longer appear to be based on "select-one" HTML object. Therefore, my custom JavaScript no longer works.
Do you know how I could visually (interactively) disable the "SAP" rendered HTMLB dropdown with a custom javascript?
Thanks!
Roman

Answer 1

here is the complete code of my sample.
<b><u>page attribute</u></b>
tab1     TYPE     TIHTTPNVP
tab1_wa     TYPE     IHTTPNVP
tab2     TYPE     TIHTTPNVP
tab2_wa     TYPE     IHTTPNVP
<b><u>layout</u></b>
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<htmlb:content design="design2003"  controlRendering="SAP" >
  <htmlb:page title=" " >
    <htmlb:form>
      <%
  clear tab1_wa .
  refresh tab1 .
  move: 'PRI' to tab1_wa-name ,
  'Printer' to tab1_wa-value .
  append tab1_wa to tab1 .
  move: 'FAX' to tab1_wa-name ,
  'Fax' to tab1_wa-value .
  append tab1_wa to tab1 .
  move: 'EMA' to tab1_wa-name ,
  'Email' to tab1_wa-value .
  append tab1_wa to tab1 .
      %>
      <%
  clear tab2_wa .
  refresh tab2 .
  move: '[email protected]' to tab2_wa-name ,
  'Some One' to tab2_wa-value .
  append tab2_wa to tab2 .
  move: '[email protected]' to tab2_wa-name ,
  'Mr X' to tab2_wa-value .
  append tab2_wa to tab2 .
  move: '[email protected]' to tab2_wa-name ,
  'Mr Y' to tab2_wa-value .
  append tab2_wa to tab2 .
      %>
<script language="javascript">
  function SetDisabled(elem,disable)
  var ip = document.getElementById(elem);
  ip.disabled = disable ;
</script>
      <htmlb:label for  = "DDLB1"
                   text = "Carrier" />
      <htmlb:dropdownListBox id                = "DDLB1"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab1 %>"
                             onClientSelect    = "javascript:dd = document.forms[0].DDLB1; alert(dd.options[dd.selectedIndex].value);"
                             width             = "150" />
      <htmlb:dropdownListBox id                = "DDLB2"
                             nameOfKeyColumn   = "NAME"
                             nameOfValueColumn = "VALUE"
                             table             = "<%= tab2 %>"
                             width             = "150" />
      <htmlb:button text          = "Press Me"
                    onClientClick = "javascript:SetDisabled('DDLB2', 'true');" />
    </htmlb:form>
  </htmlb:page>
</htmlb:content>
try this in your system and let me know whether it works or not
Regards
Raja