bootstrap multiselect dropdown+disable uncheck for particular option - javascript

How I can disable uncheck option from the bootstrap multi-select drop-down, actually on load some option by default is checked and I want those options not to be unchecked. Below I am providing an image for better understanding.
! [Link for the sample image] 1
From the above image those three is by default checked while page load and now I don't want to be unchecked those three (Cheese, Tomatoes, Mozzarella)
Below I am providing the link of the above requirement.
Link to the sample code
Thanks

You can just simply add disabled (and selected) attributes to the options which you want to keep selected.
<div class="form-group">
<label class="col-md-4 control-label" for="rolename">Role Name</label>
<div class="col-md-4">
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple">
<option value="cheese" disabled selected>Cheese</option>
<option value="tomatoes" disabled selected>Tomatoes</option>
<option value="mozarella" disabled selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</div>
</div>
It's important that you only initialize the multiselect after you have set the attributes

Related

How to add Chosen placeholder text on mobile devices?

I'm trying to fix a bug on a Worpress theme using jquery-Chosen multi select tool. Here is the page in which the form is: http://mitramimoveis.com.br/temp/ . The placeholder works well on desktops and is input through the theme's interface:
Theme's interface
However, on mobile devices, the multi select fields only show "0 selected", on Android and "0 Items", on iPhone. The placeholder I put doesn't show up at all. I already tried adding a blank Option as first, using custom jQuery through the "Custom CSS and JS" Wordpress plugin, but it didn't work - all the answers I found regarding this issue, addressed this as a solution.
The html code for the forms:
<!-- Row -->
<div class="row with-forms">
<div class="search-form-_property_type col-md-3 custom-tipo-imovel">
<select multiple name="_property_type[]" name="_property_type" id="_property_type" data-placeholder="Tipo de imóvel" class="chosen-select">
<option value="">Tipo de imóvel</option>
<option value="apartamento">Apartamento</option>
<option value="casa">Casa</option>
<option value="sobrado">Sobrado</option>
</select>
</div>
<div class="search-form-_cidade col-md-3 custom-tipo-imovel">
<select multiple name="_cidade[]" name="_cidade" id="_cidade" data-placeholder="Cidade" class="chosen-select">
<option value="">Cidade</option>
<option value="Curitiba">Curitiba</option>
<option value="Campo Largo">Campo Largo</option>
</select>
</div>
<div class="search-form-tax-region col-md-3 custom-tipo-imovel">
<select multiple name="tax-region[]" data-placeholder="Bairro" class="chosen-select">
<option value="">Bairro</option>
<option value="bigorrilho">Bigorrilho</option>
<option value="cabral">Cabral</option>
<option value="centro">Centro</option>
<option value="portao">Portão</option>
</select>
</div>
<div class="col-md-3 ">
<button class="button fullwidth">Buscar</button>
</div>
</div>
How can I solve this? I need the users to know what are the options about on each field and the theme doesn't offer a label (which I also don't want to use). Thanks.
*I noted that the first option is the same as the placeholder and has an empty value.
Hope this is welcomed feedback but placeholder text isn't ADA compliant. Here are some resources that can help you take a different approach if you so choose:
https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research
Example:
https://material-ui.com/components/selects/

How to remove blank from dropdown and required validation working in AngularJS?

I have a dropdown, I'm binding it with owners, but its giving extra blank option. I want to remove the blank option from it. I'm able to do but when I add these changes my required validator does show error.
<md-input-container>
<select name="owner" ng-model="form.owner" ng-options="owner.UserName for owner in owners"
class="input-div" style="height:30px" ng-change="ownerTypeChange()" required ng-disabled="update && view">
<option style="display:none" value=undefined>Select an owner</option>
</select>
<div ng-messages="DataAccessRoleForm.owner.$error">
<div ng-message="required">required</div>
</div>
</md-input-container>
If I remove the below line, then required validator works but dropdown has the blank option.
<option style="display:none" value=undefined>Select an owner</option>
Check if your select has been touched before displaying the required message.
<div ng-if="form.owner.$touched" ng-message="required">required</div>
You can also set the default option to be selected but not selectable once they open the drop down.
<option value="" disabled selected hidden>Select an owner</option>

Jquery mobile flipswitch toggle for gender (like Tinder)

I am working on an app that will have a setting page where the user can use the flip toggle to select the gender. The flip toggle consist of male (on off)and female (on off). Depending of the selection, an ul list will display with gender preference. I am struggling trying to find a solution with PHP or JQuery/JavaScript. Any code solution from you guys?
The HTML5 code:
<div data-role="page" id="page-settings" class="page-panel">
<div data-role="content" id="settingsPanel">
<div data-role="fieldcontain" id="menSelector" >
<label for="flip-1">Men</label>
<select name="flip-1" id="flip-1" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
<div data-role="fieldcontain" id="womenSelector" >
<label for="flip-2">Women</label>
<select name="flip-2" id="flip-2" data-role="slider"data-mini="true">
<option value="off"></option>
<option selected="selected" value="on"></option>
</select>
</div>
The -ul -li list is appending from database +item.Gender+ with values : female or male.
Any help will be very appreciated since I have been searching foo three days with no success.

Select options are getting separated from select box when the div above it is hidden

I have a validation message under a input. When a user inputs a message in the input and then selects an option from the select box the validation message hides and the select options get separated from the select box. I'm looking for a way to keep the options directly under the select box.
Thanks in advance.
Here is some quick code.
<input type='text' id='message'/>
<div id='msg'>add your message</div>
<select name="schools" id="schools" value="School" title="School">
<option value="">School</option>
<option value="1">one</option>
<option value="2">two</option>
<option value="3">Three</option>
</select>
$('#message').blur(function () {
$('#msg').fadeOut();
});
Here is a fiddle http://jsfiddle.net/5qbEM/29/.
Looks like this is a chrome bug.

How to select option in select tag

I need to add javascript or jquery code in order to select option from combobox. There are 25 comboboxes and there value read from database. Please find below code fragment
option which is selected by user needs to be selected. It has to be read from database.
<div class="control-group">
<label class="control-label">A. Nails are Clean *</label>
<div class="controls">
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely">Rarely</option>
</select>
</div>
</div>
If you add id attribute to select
<select name="obs_chart_nails_clean" id="obs_chart_nails_clean">
and add jquery to your page, then
$(document).read(function(){
$("#obs_chart_nails_clean").val("Rarely");
});
will select third option.
What do you have server-side? You should be able to produce html with correct option already selected.
In addition to the existing answers, the obvious no-javascript solution must be noted:
<select name="obs_chart_nails_clean" >
<option value="Always">Always</option>
<option value="Sometimes">Sometimes</option>
<option value="Rarely" selected>Rarely</option>
</select>
Simply add the selected attribute to one of the options.
$(document).ready(function(){
$('#obs_chart_nails_clean').val("Sometimes");
});

Categories

Resources