Temporarily disable a specific option after it has been selected (in any selector) for all instances of that selector in

» javascript » Temporarily disable a specific option after it has been selected (in any selector) for all instances of that selector in

By : Emily

Date : December 01 2020, 04:50 PM

With these it helps Let me try to help you. First of all, as mentioned in comments you have to delete onchange handler from loop and you have to make select id unique. (using $i variable). And then after selects had been created you have to handle their changes using event-delegation api.
Few words about change handler. If I had correctly understood your requirements You have to disable all 'spouse' options for all non first selects. So handler is checking if the select is the first or not, and if it is is setting prop('disabled') based on first select value. Please feel free to correct me if I wrongly understood your requirements.

code :

   $(document).on('change', '.select', function() {
  const selects = $('.select');
  const doesAnyoneIsSpouse = selects.filter(function(key) {
return $(selects[key]).val() === '1';
  }).length > 0;

  $('.select').not(this).find('option[value="1"]').prop('disabled', doesAnyoneIsSpouse);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select tabindex="" id="relationship_select" class="select" name="prgm_person[0][person_relationship_id]" style="width: 110px;">
   <option value=""></option>
   <option value='0'>Child</option>
   <option value='1'>Spouse</option>
 </select>

 <select tabindex="" id="relationship_select" class="select" name="prgm_person[1][person_relationship_id]" style="width: 110px;">
   <option value=""></option>
   <option value='0'>Child</option>
   <option value='1'>Spouse</option>
 </select>

 <select tabindex="" id="relationship_select" class="select" name="prgm_person[2][person_relationship_id]" style="width: 110px;">
   <option value=""></option>
   <option value='0'>Child</option>
   <option value='1'>Spouse</option>
 </select>

 <select tabindex="" id="relationship_select" class="select" name="prgm_person[3][person_relationship_id]" style="width: 110px;">
   <option value=""></option>
   <option value='0'>Child</option>
   <option value='1'>Spouse</option>
 </select>

Share :

Dropdown selector, selected option

By : user3017388

Date : March 29 2020, 07:55 AM

To fix this issue params[:user][:id] will give you id of selected user, so you need to find the user using this id.

code :

selected_user = User.find(params[:user][:id])

<%= form_tag('/click',:method=>'get') do -%>
 <%= current_user_selector %>
 <%= submit_tag 'Get Selected' %>
<% end -%>

Apply android Selector for a specific child of listview and disable the selector on the other childs in the same list it

By : strabalk

Date : March 29 2020, 07:55 AM

may help you . I face this problem before , and have a nice solution look here for sample code

How does a strong selector override an id selector? Isn't an id selector considered more specific?

By : Grahama

Date : March 29 2020, 07:55 AM

around this issue You are correct with specificity, but selectors only work with the direct content of the element. So the text color is different for the strong elements because it is nested deeper and the p selector isn't able to change the color for those elements. So if you did want to change the strong elements for #abc you would do it like this

code :

strong { color: red; }

#abc strong {  color: blue; }

#abc, #abc strong { color: red; }

strong { color: red; }
#abc strong {  color: blue; }
#def, #def strong { color: red; }

<p id="abc">
  <strong>C</strong>ascading
  <strong>S</strong>tyle
  <strong>S</strong>heets
</p>
<p id="def">
  <strong>ABC</strong>
DEF
</p>

Selector - Temporarily disable an option while selected

By : user1297459

Date : March 29 2020, 07:55 AM

wish helps you If I understood you correctly, you want to disable an option once it gets selected?

code :

function updateSource(e) {
  const target = e[e.value];
  target.disabled = true;
}

<select onchange="updateSource(this)">
  <option value="0" disabled selected>Select an Indicator</option>
  <option value="1">Change in grain (maize, wheat & barley) production</option>
  <option value="2">Change in Sorghum production</option>
</select>

function updateSource(e) {
  Object.keys(e).forEach(k => e[k].disabled = false);
  const target = e[e.value];
  target.disabled = true;
}

<select onchange="updateSource(this)">
  <option value="0" disabled selected>Select an Indicator</option>
  <option value="1">Change in grain (maize, wheat & barley) production</option>
  <option value="2">Change in Sorghum production</option>
</select>