动态禁用选择框不能使用选择

时间:2012-12-04 21:01:31

标签: php jquery html forms select

我正在尝试创建一个html选择框,根据用户在不同的选择框中输入的内容动态禁用和启用...当我只使用html时这工作正常,但我想使用jQuery插件选择为此,它不起作用......我需要做的主要事情是根据另一个选择框的onchange选择禁用或启用更新。选择这可能吗?如何?非常感谢。

以下是我的javascript:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PROCapture Marketing | My Dashboard</title>
<link rel="stylesheet" type="text/css" href="../Style Sheets/PCMBackOffice-Styles.css">
<link href="../Style Sheets/headermenuhome.css" rel="stylesheet"><script type="text/javascript" src="../Scripts/jQuery1.7.1.js"></script>
<script src="../Scripts/instantiatemenu.js"></script>
<script>
function displayleads(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("fromleadstransfer").innerHTML="<option value=''>Select Leads To Transfer...</option>";
  document.getElementById("fromleadstransfer").disabled=true;
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("fromleadstransfer").innerHTML=xmlhttp.responseText;
    if (document.getElementById("fromleadstransfer").value != "noleads") {
    document.getElementById("fromleadstransfer").disabled=false;
    } else {
    document.getElementById("fromleadstransfer").disabled=true;
    }
    }
  }
xmlhttp.open("GET","../Scripts/transferfromselect.php?system="+str,true);
xmlhttp.send();
}
</script>
<script>
function displayfolders(str2)
{
var xmlhttp;
if (str2=="")
  {
  document.getElementById("tofoldertransfer").innerHTML="<option value=''>Select Folder To Send Leads...</option>";
  document.getElementById("tofoldertransfer").disabled=true;
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("tofoldertransfer").innerHTML=xmlhttp.responseText;
    document.getElementById("tofoldertransfer").disabled=false;
    }
  }
xmlhttp.open("GET","../Scripts/transfertoselect.php?system="+str2,true);
xmlhttp.send();
}
</script>
<link rel="stylesheet" type="text/css" href="../chosen/chosen2.css">
<script src="../chosen/jquery.js"></script>
<script src="../chosen/chosen.jquery.js"></script>
<script>
jQuery(document).ready(function(){
  jQuery(".fromleadstransfer").chosen();
  jQuery(".fromsystemtransfer").chosen();
  jQuery(".tofoldertransfer").chosen();
  jQuery(".tosystemtransfer").chosen();
  jQuery(".operationselect").chosen({disable_search_threshold: 3});
});

以下是表格:

<form method="post" name="transferleadsform">
    <div class="transferleftside">
    <div class="primarytransfercontainer">
    <span class="primarytransferspan">From:</span>
    <br>
    <div class="transferinnercontainer1"><label>Operation: </label>
    <select id="operationselect" name="operationselect" class="operationselect">
    <option value="Copy" selected="selected">Copy</option>
    <option value="Move">Move</option>
    </select></div>
    <br>
    <div class="transferinnercontainer2"><label>System: </label>
    <select name="fromsystemtransfer" class="fromsystemtransfer" id="fromsystemtransfer" onChange="displayleads(this.value)">
    <option value="">Select A System...</option>
    <?php
        foreach($systems as $systemid) {  
        ?>
        <option value="<?php echo $systemid?>"><?php echo $systemid?></option>
        <?php
        }
        ?>
    </select></div>
    <br>
    <div class="transferinnercontainer2"><label>Leads: </label>
    <select name="fromleadstransfer" multiple disabled="disabled" class="fromleadstransfer" id="fromleadstransfer">
    <option value="">Select Leads To Transfer...</option>
    </select></div>
    </div>
    </div>
    <div class="transferrightside">
    <div class="primarytransfercontainer">
    <span class="primarytransferspan">To:</span>
    <br>
    <div class="transferinnercontainer1"><label>System: </label>
    <select id="tosystemtransfer" name="tosystemtransfer" class="tosystemtransfer" onChange="displayfolders(this.value)">
    <option value="">Select A System To Send Leads...</option>
    <?php
        foreach($systems as $systemid) {
        ?>
        <option value="<?php echo $systemid?>"><?php echo $systemid?></option>
        <?php
        }
        ?>
    </select></div>
    <br>
    <div class="transferinnercontainer3"><label>Folder: </label>
    <select id="tofoldertransfer" name="tofoldertransfer" disabled="disabled" class="tofoldertransfer">
    <option value="">Select Folder To Send Leads...</option>
    </select></div>
    <br>
    <input type="submit" class="transferbutton TransferSprites" value="<< Transfer Leads >>">
    </div>
    </div>
    <div class="longdivider TransferSprites">
    </div>
    </form>

1 个答案:

答案 0 :(得分:0)

禁用该元素后,需要触发它的更新功能

$(element).prop('disabled', true).trigger("liszt:updated");
  

动态更新选择   如果您需要更新选择字段中的选项并希望选择选择更改,则需要在该字段上触发“liszt:updated”事件。 Chosen将根据更新的内容重新构建自己。

jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");