Question

我在html中有一个多select个框。我使用jQuery chosen插件使选择框更加用户友好。我希望我可以实现以下功能，但我不知道该怎么做。请原谅我，我是HTML的新手。

当用户从选项列表中选择“任意”时，我希望该框不允许任何其他输入（即成为单选）。

同样，当用户输入除“Any”之外的任何其他选项时，我希望禁用“Any”。

例如，我有一个多select框，其中包含以下选项：

任何
德国
法国
USA
沙特阿拉伯

所以基本上用户可以选择德国，法国，美国和沙特阿拉伯的某种组合，但不能选择“任意”选项，或者他们可以选择“任意”而不选择任何其他组合。

Answer 1

试试这个：

  <select id='country'>
    <option> </option>
    <option id='any' value='any'>Any</option>
    <option id='germany' value='germany'>Germany</option>
    <option id='france' value='france'>France</option>
    <option id='usa' value='usa'>USA</option>
</select>



  $( document ).ready(function() {
   $("#country").change(function() {
    if ($(this).val() == 'any') {
        $('#germany').attr("disabled", "disabled");
        $('#france').attr("disabled", "disabled");
        $('#usa').attr("disabled", "disabled");
        currentSelect = -1;
    } else {
       $('#any').attr("disabled", "disabled");
    }
});
});

Answer 2

试试这个 -

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ali.readonefield"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
    android:minSdkVersion="19"
    android:targetSdkVersion="22" />

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name=".MainActivity"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
    <activity
        android:name=".Output"
        android:label="@string/app_name" >
    </activity>
</application>

</manifest>

确保在多选

中为任何标签添加“任意”值

Answer 3

以下是使用chosen插件的解决方案：

$('.chosen-select').chosen({});

$('.chosen-select').on('change', function(evt, params) {
    var $s = $(this);
    
    if (params.selected && params.selected == "Any") {
        // disable the select
        $s.children('option').not(':selected').each(function(){
            $(this).attr('disabled','disabled');
        });
    }
    else if (params.deselected && params.deselected == "Any") {
        // enable back
        $s.children('option').each(function(){
            $(this).removeAttr('disabled');
        });
    }
    // force chosen update
    $('.chosen-select').trigger('chosen:updated');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
    
<div>
<select data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4">
            <option value=""></option>
            <option value="Any">[Any]</option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>

          </select>    
</div>

HTML，多选框，禁用选择

3 个答案: