在其他选择中禁用选项

时间:2016-02-16 11:25:00

标签: javascript jquery html css

我有选项问题。我创建了搜索表单。当我选择班级.tylkopolska时,我想要禁用下一个选择的所有选项,ID为#kraje 并保留启用类.wlacozneto的选项。这怎么用jQuery? 我的代码在这里;

    <form method="get" action="<?php bloginfo('url'); ?>">
<fieldset>
<!-- wybór -->
<h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
<input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input> <input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>

<!-- kategorie  OFERTA DLA SZKOL -->
<select name="category_name" id="sofertyszkola">
    <option value="szkoly" >WSZYSTKIE OFERTY</option>
    <option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
    <option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
    <option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
    <option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
    <option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
</select>

<!-- kategorie  OFERTA DLA FIRM -->
<select name="category_name" id="sofertyfirma">
    <option value="firma">WSZYSTKIE OFERTY</option>
    <option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
    <option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
</select>

<!-- jaki kraj -->
<h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
<select name="tag" id="kraje">
    <option value="Polska">POLSKA</option>
    <option value="AUSTRIA">AUSTRIA</option>
    <option value="BELGIA">BELGIA</option>
    <option value="BIAŁORUŚ">BIAŁORUŚ</option>
    <option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
    <option value="CHORWACJA">CHORWACJA</option>
    <option value="CZECHY">CZECHY</option>
    <option value="ESTONIA">ESTONIA</option>
    <option value="FRANCJA">FRANCJA</option>
    <option value="GRECJA">GRECJA</option>
    <option value="HISZPANIA">HISZPANIA</option>
    <option value="LITWA">LITWA</option>
    <option value="ŁOTWA">ŁOTWA</option>
    <option value="NIEMCY">NIEMCY</option>
    <option value="ROSJA">ROSJA</option>
    <option value="RUMUNIA">RUMUNIA</option>
    <option value="SŁOWACJA">SŁOWACJA</option>
    <option value="SŁOWENIA">SŁOWENIA</option>
    <option value="UKRAINA">UKRAINA</option>
    <option value="WĘGRY">WĘGRY</option>
    <option value="WŁOCHY">WŁOCHY</option>
</select>


<button type="submit">Szukaj ofert</button>
</fieldset>
</form>
<script>
var update_szkoly = function () {
    if ($("#ofertadlaszkol").is(":checked")) {
        $('#sofertyszkola').prop('disabled', false);
        $("#ofertadlafirm").prop('checked', false);
         $('#sofertyfirma').prop('disabled', true);

         $('#sofertyszkola').show();
         $('#sofertyfirma').hide();
    }
    else {
        $('#sofertyszkola').prop('disabled', 'true');
    }
};

$(update_szkoly);
$("#ofertadlaszkol").change(update_szkoly);

var update_firmysa = function () {
    if ($("#ofertadlafirm").is(":checked")) {
        $('#sofertyfirma').prop('disabled', false);
        $("#ofertadlaszkol").prop('checked', false);
                 $('#sofertyszkola').prop('disabled', true);
         $('#sofertyszkola').hide();
         $('#sofertyfirma').show();

    }
    else {
        $('#sofertyfirma').prop('disabled', 'disabled');
    }
};

$(update_firmysa);
$("#ofertadlafirm").change(update_firmysa);
</script>

4 个答案:

答案 0 :(得分:1)

  

我想禁用下一个选择的所有选项,ID为#kraje并离开   有.wlacozneto类的选项。

禁用除{class 1}}

之外的所有选项
wlacozneto

使用not选择器排除某些结果。

答案 1 :(得分:0)

document.getElementById("kraje").disabled = true;

答案 2 :(得分:0)

绑定更改事件:

$('#sofertyszkola').change(function() {
  $('#kraje').children().not('.wlacozneto')
    .prop('disabled', $(':selected', this).is('.tylkopolska'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
  <!-- wybór -->
  <h2 class="h-feature-headline h6" style="margin-bottom: 15px;"><span><i class="x-icon-question" data-x-icon="" style="background-color: #38b7f7;"></i>Jakie oferty Cię interesują? </span></h2>
  <input type="radio" id="ofertadlaszkol" checked>Oferta dla szkół</input>
  <input type="radio" style="margin-left: 10px;" id="ofertadlafirm">Oferta dla firm</input>

  <!-- kategorie  OFERTA DLA SZKOL -->
  <select name="category_name" id="sofertyszkola">
    <option value="szkoly">WSZYSTKIE OFERTY</option>
    <option value="wycieczki-kilkudniowe" class="tylkopolska">WYCIECZKI W POLSCE - KILKUDNIOWE</option>
    <option value="wycieczki-jednodniowe">WYCIECZKI W POLSCE - JEDNODNIOWE</option>
    <option value="wycieczki-zagraniczne">WYCIECZKI ZAGRANICZNE</option>
    <option value="zielone-szkoly-w-gorach">ZIELONE SZKOŁY W GÓRACH</option>
    <option value="zielone-szkoly">ZIELONE SZKOŁY NAD MORZEM</option>
  </select>

  <!-- kategorie  OFERTA DLA FIRM -->
  <select name="category_name" id="sofertyfirma">
    <option value="firma">WSZYSTKIE OFERTY</option>
    <option value="wycieczki-zagraniczne-firma">WYCIECZKI ZAGRANICZNE</option>
    <option value="wycieczki-w-polsce">WYCIECZKI W POLSCE</option>
  </select>

  <!-- jaki kraj -->
  <h2 class="h-feature-headline h6"><span><i class="x-icon-map" data-x-icon="" style=" background-color: #2ecc71;"></i>Kraj wyjazdu</span></h2>
  <select name="tag" id="kraje">
    <option value="Polska" >POLSKA</option>
    <option value="AUSTRIA">AUSTRIA</option>
    <option value="BELGIA">BELGIA</option>
    <option value="BIAŁORUŚ">BIAŁORUŚ</option>
    <option value="BOŚNIA i HERCEGOWINA">BOŚNIA i HERCEGOWINA</option>
    <option value="CHORWACJA">CHORWACJA</option>
    <option value="CZECHY">CZECHY</option>
    <option value="ESTONIA" class='wlacozneto'>ESTONIA</option>
    <option value="FRANCJA">FRANCJA</option>
    <option value="GRECJA">GRECJA</option>
    <option value="HISZPANIA">HISZPANIA</option>
    <option value="LITWA">LITWA</option>
    <option value="ŁOTWA">ŁOTWA</option>
    <option value="NIEMCY">NIEMCY</option>
    <option value="ROSJA">ROSJA</option>
    <option value="RUMUNIA">RUMUNIA</option>
    <option value="SŁOWACJA">SŁOWACJA</option>
    <option value="SŁOWENIA">SŁOWENIA</option>
    <option value="UKRAINA">UKRAINA</option>
    <option value="WĘGRY">WĘGRY</option>
    <option value="WŁOCHY">WŁOCHY</option>
  </select>


  <button type="submit">Szukaj ofert</button>
</fieldset>

  1. 在选择器元素上绑定更改事件。
  2. 现在获取目标元素的子选项元素,并使用.not(selector)排除特定元素。
  3. 如果所选选项为.prop(),请使用.tylkopolska方法停用所有其他选项。

答案 3 :(得分:0)

$( "#kraje" ).prop('disabled', true);
$( "#kraje.wlacozneto" ).prop('disabled', false);