Question

我想在select选项（授权类型）上创建禁用功能，当我选择选项表单选择字段时，应该禁用某些表单字段。并且通过选择其他选项，应禁用其他选项，并且必须启用先前的禁用选项。

<form action="/execomp/addexeccomp" method="post" id="addDetailsForm">
< table align="center">
        <tr>
            <td>Grant Type</td>
            <td><select name="granttype" id="grnt"  />
                <option value="ISO">Incentive Stock Option</option>
                <option value="NSO">Non Qualified Stock Option</option>
                <option value="SB">Stock Bonus </option>
              <option value="ESOP">Employee Stock Ownership Plan</option>
                <option value="RS">Restricted Stock</option>
                <option value="RSU">Restricted Stock Unit</option>
            <option value="ESPP">Employee Stock Purchase Plan</option> 
               </select>
            </td>
        </tr>
        <tr id="iss">
            <td>Issuer</td>
            <td><input type="text" name="issuer" value="" id="iss"/></td>
        </tr>
        <tr id="date">
            <td>Grant Date</td>
            <td>
                <input type="text" id="grantdate" name="grantdate" class="PopUpDate"  style="display: inline;"/>
                </td>
        </tr>
        <tr id="nou">
            <td>Number of Units</td>
            <td><input type="text" name="numberofunits" value="" /></td>
        </tr>
        <tr id="gp">
            <td>Grant Price ($)</td>
            <td><input type="text" name="price" value="" /></td>
        </tr>
        <tr id="fpu">
            <td>FMV Per Unit ($)</td>
            <td><input type="text" name="fmvperunitatgrant" value="" /></td>
        </tr>
        <tr id="vt">
            <td>Vesting Type</td>
            <td><select name="vestingtype" />
                <option value="G">Graduated</option>
                <option value="C">Cliff</option>
                <option value="N">Neither</option>
              </select>  
            </td>
        </tr>
        <tr id="vf">
            <td>Vesting Frequency</td>
            <td>
               <select name="vestingfrequency"  />
                <option value="A">Annual</option>
                <option value="Q">Quarterly</option>
                <option value="M">Monthly</option>
               </select>
            </td>
        </tr>
        <tr id="vpp">
            <td>Vesting % Per Period</td>
            <td><input type="text" name="vestingfractionperperiod" value="" /></td>
        </tr>
        <tr id="vd">
            <td>Vesting Duration</td>
            <td><input type="text" name="vestingperiodyrs" value="" /> Years</td>
        </tr>
        <tr id="set">
            <td>Settlement Option</td>
            <td><select name="settlementoption" id="sett" />
                <option value="C">Cash</option>
                <option value="S">Stock</option>
                <option value="N">Not Applicable</option>
               </select></td>
        </tr>
        <tr id="ad">
            <td>Annual Dividend</td>
            <td><input type="text" name="annualcashdividendperunit" value="" />%</td>
        </tr>
        <tr id="dg">
            <td>Dividend Growth</td>
            <td><input type="text" name="dividendgrowth" value="" />%</td>
        </tr>
        <tr id="cp">
            <td>Current Price</td>
            <td><input type="text" name="curpriceperunit" value="" />%</td>
        </tr>
        <tr id="ar">
            <td>Annual Return</td>
            <td><input type="text" name="annualreturn" value="" />%</td>
        </tr>
        <tr id="ownr">
            <td>Owner</td>
            <td>
               <select name="owner"  />
                 <option value="client">Client</option>
                 <option value="spouse">Spouse</option>
                 <option value="trust">Trust</option>
                 </td>
        </tr>
        <tr id="bc">
            <td>Brokerage Company</td>
            <td><input type="text" name="brokeragecompany" value="" /></td>
        </tr>

Answer 1

首先，您需要收听选择事件：

http://api.jquery.com/select/

接下来，在该事件上，启用/禁用所需的元素：

http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html

示例：

$('#granttype').select(function() {
  // To disable 
  $('.someElement').attr('disabled', 'disabled');

  // To enable 
  $('.someElement').removeAttr('disabled');

});

Answer 2

 try this...

 <!DOCTYPE html>
 <html>
 <body>

<select>
<option value="volvo" disabled>Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi">Audi</option>
</select>

</body>
</html>
if you want dependency between options.you might check this.

jQuery - disable input field based on another field selected value

Jquery创建一个禁用功能

2 个答案: