0

我正在尝试制作一个 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>
4

1 回答 1

0

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

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

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

jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
于 2012-12-04T21:07:17.173 回答