Question

它有效，现在它没有。我无法找到我做错的事。当您选择＆＃34; Ja＆＃34;时，它应显示带驾驶执照类别的div。在选择框中。

以下是源代码。解决这个问题应该很简单，我无法看到它:(

＆＃13;

var nein = $('#nein'),
  ja = $('#ja');

ja.click(function() {
  if ($('#kfz').hasClass('in')) {
    return false;
  }
});

nein.click(function() {
  if (!$('#kfz').hasClass('in')) {
    return false;
  }
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
  <label for="has_driverslicense">KFZ F&uuml;hrerschein:</label>
  <select class="form-control" required="required" id="has_driverslicense" name="has_driverslicense">
    <option value="0" id="nein" data-toggle="collapse" data-target="#kfz">Nein</option>
    <option value="1" id="ja" data-toggle="collapse" data-target="#kfz">Ja</option>
  </select>

  <div id="kfz" class="collapse out">
    <div>
      <input id="checkbox-20" class="checkbox-style" name="work_as_service" type="checkbox">
      <label for="checkbox-20" class="checkbox-style-3-label">B (Auto bis 3,49t)</label>
    </div>
    <div>
      <input id="checkbox-21" class="checkbox-style" name="work_as_service_cashier" type="checkbox">
      <label for="checkbox-21" class="checkbox-style-3-label">BE (Auto mit Anh&auml;nger)</label>
    </div>
    <div>
      <input id="checkbox-22" class="checkbox-style" name="work_as_service_leader" type="checkbox">
      <label for="checkbox-22" class="checkbox-style-3-label">C1 (LKW bis 7,49t)</label>
    </div>
    <div>
      <input id="checkbox-23" class="checkbox-style" name="work_as_bar" type="checkbox">
      <label for="checkbox-23" class="checkbox-style-3-label">C (LKW bis 40t)</label>
    </div>
    <div>
      <input id="checkbox-24" class="checkbox-style" name="work_as_logistics" type="checkbox">
      <label for="checkbox-24" class="checkbox-style-3-label">CE (LKW mit Anh&auml;nger)</label>
    </div>
    <div>
      <input id="checkbox-25" class="checkbox-style" name="work_as_cook" type="checkbox">
      <label for="checkbox-25" class="checkbox-style-3-label">Fahrerkarte</label>
    </div>
    <div>
      <input id="checkbox-26" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-26" class="checkbox-style-3-label">Gabelstaplerf&uuml;hrerschein</label>
    </div>
    <div>
      <input id="checkbox-27" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-27" class="checkbox-style-3-label">Gel&auml;ndestaplerf&uuml;hrerschein</label>
    </div>
    <div>
      <input id="checkbox-28" class="checkbox-style" name="work_as_cook_assistant" type="checkbox">
      <label for="checkbox-28" class="checkbox-style-3-label">IPAF – Arbeitsbühnen</label>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 1

从select中获取值，并使用addClass / remoceClass

$("#has_driverslicense").on("change", function(){
  if($(this).val() === "1") {
     $('#kfz').addClass("in");  
  } else {
    $('#kfz').removeClass("in");
  }
})

我更新了小提琴： https://jsfiddle.net/aq8pqbft/1/

Javascript toggle colapse div不起作用

1 个答案: