Ad
Html
In html, <select multiple="multiple"> tag, if one certain option checked, how to disable several "other relevant options"
example:
<select multiple="multiple">
<option value=''></option>
<option value='"matchCase": true'>matchCase</option>
<option value='"matchWildCards": true'>matchWildCards</option>
<option value='"ignoreSpace": true'>ignoreSpace</option>
<option value='"ignorePunct": true'>ignorePunct</option>
<option value='"matchWholeWord": true'>matchWholeWord</option>
<option value='"matchSoundsLike": true'>matchSoundsLike</option>
<option value='"matchPrefix": true'>matchPrefix</option>
<option value='"matchSuffix": true'>matchSuffix</option>
</select>
In the above example
if matchWildCards option checked, matchCase, matchPrefix, matchSuffix,matchWholeWord options must be disabled,users can no longer check these four options if matchWildCards option checked. if users have checked these some of the above four options, those checked must also be unchecked.
Is it possible to do something like this purely in html? if not, javascript or Jquery related plugins are also welcomed.
Ad
Answer
This should do what you need. Add classes to the options to simplify the filtering
<select multiple="multiple" size="20">
<option value=''></option>
<option value='"matchCase": true'>matchCase</option>
<!-- note added class "no-match"-->
<option class="no-match" value='"matchWildCards": true'>matchWildCards</option>
<option value='"ignoreSpace": true'>ignoreSpace</option>
<option value='"ignorePunct": true'>ignorePunct</option>
<!-- note added class "match" -->
<option class="match" value='"matchWholeWord": true'>matchWholeWord</option>
<option class="match" value='"matchSoundsLike": true'>matchSoundsLike</option>
<option class="match" value='"matchPrefix": true'>matchPrefix</option>
<option class="match" value='"matchSuffix": true'>matchSuffix</option>
</select>
JS
$('select').change(function() {
var $options = $(this).children()
if ($options.filter('.no-match').is(':selected')) {
$options.filter('.match').prop('selected', false).prop('disabled', true)
} else {
$options.filter('.match').prop('disabled', false)
}
});
I'm not so sure that this UX won't confuse users though
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad