【问题标题】:javascript disable multiselect box based on selections in another multiselect boxjavascript 根据另一个多选框中的选择禁用多选框
【发布时间】:2013-01-14 19:46:16
【问题描述】:

我有两个多选框,一个用于国家列表,一个用于州列表

<select multiple="multiple" name="country[]" id="country" >
      <option value="0">Select a Country</option>


  <?php 
    foreach($country_list as $key=>$value){
    echo "<option value=\"$key\"";
      if($html['Country Name']==$key|| $row['Country Name']==$key){
       echo ' selected="selected"';
      }
    echo ">$value</option>\n";                                     
    }?>
</select>


<select multiple="multiple" name="state[]" id="state">
      <option value="">Select a State</option>
      <?php 
        foreach($state_list as $key=>$value){
        echo "<option value=\"$key\"";
          if($html['state']==$key|| $row['state']==$key){
            echo ' selected="selected"';
          }
        echo ">$value</option>\n";                                     

        }?>
    </select>

I have this javascript which enables the state box when the country selected is USA.

window.onload = function() {
    var selectCountry = document.getElementById('country');
    selectCountry.onchange = function() {
        document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
    };
};

但是,我希望在第一个选择其他国家和美国时禁用状态框。 请问有什么建议吗?谢谢

【问题讨论】:

    标签: php javascript jquery html


    【解决方案1】:

    演示:http://jsfiddle.net/eBTgb/

    $("#country").on("click change", function(){
      var option_usa = $("option[value=6]", this);
    
      if (option_usa.is(":selected") && option_usa.siblings(":selected").length == 0) {
        $("#state").removeAttr("disabled");
      }
      else {
        $("#state").attr("disabled", "disabled");
      }
    });
    

    希望你能正确理解。

    【讨论】:

      【解决方案2】:

      这可以使用 JQuery 来完成。

       $("#state").hide();
       $("#country").change( function () {  
          var countryName = $("#country").find("option:selected").html();
          if(countryName == 'USA'){
            $("#state").show(); 
          } else {
            $("#state").hide();
          }
        });
      

      这是JSFIDDLE的链接

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2011-08-17
        • 2021-10-30
        • 1970-01-01
        • 2013-07-29
        • 2019-01-03
        相关资源
        最近更新 更多