

画面表示をしたときにデフォルトでは時間が9:00と表示され、  
終了時刻のチェックボックスにチェックを入れたら22:00に切り替わり、チェックボックスを外したら21:00に切り替わるという実装をしたいと考えていますが上手くいきません。(画面表示をしたときにデフォルトでは時間が9:00というのはできてます。)  
どのように修正したらよろしいでしょうか。お願いいたします。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>あいうえお商店</title>
    
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
      <style>.input-group.timepicker { display: inline-table;
       vertical-align: middle; }</style>
    
     </head>
     <body>
       <div class="container">
        <p>あいうえお商店</p>
        <p>住所：東京都千代田区</p>
        <form class="form-inline" name="form1">
          <div class="form-group">
            <label class="control-label" style="font-weight:normal;" for="businesshours">時間：</lab    el>
            <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
    
              <input type="text" id="businesshours" class="form-control input-small timepicker1">
              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div> ～ 
            <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
              <input type="text" class="form-control input-small timepicker1">
              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
            <div class="checkbox" style="position:relative;left:45px;display:block;margin-bottom: 0p    x;margin-top: 0px;">
              <label><input id="Checkbox1" value="" type="checkbox">終了時刻</label>
            </div>
            <a class="btn btn-primary" href="#">戻る</a>
          </div>
        </form>
      </div>
      <script type="text/javascript">
        $(function() {
         $('.timepicker1').timepicker({
    
          showMeridian: false,
          minuteStep: 1,
          defaultTime: "9:00"
        });
    
         $('#Checkbox1').click(function() {
          if ($(this).prop('checked') == true) {
            $('.timepicker1').timepicker({
    
              showMeridian: false,
              minuteStep: 1,
              defaultTime: "22:00"
            });
          }else{
            $('.timepicker1').timepicker({
    
              showMeridian: false,
              minuteStep: 1,
              defaultTime: "21:00"
            });
          }
        });
       });
    
     </script>
    </body>
    
[/code]


CC BY-SA 3.0
2016-12-07T16:09:46.660
30992
2016-12-08T01:09:55.477
17348
question
javascript jquery html5 bootstrap
チェックボックスを扱って時間を変更したい。


Timepickerの時間を設定するのに、setTimeを利用してください。  
詳しくは、[ここ](https://jdewit.github.io/bootstrap-timepicker/)に参照してください。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>あいうえお商店</title>
    
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
      <style>.input-group.timepicker { display: inline-table;
       vertical-align: middle; }</style>
    
     </head>
     <body>
       <div class="container">
        <p>あいうえお商店</p>
        <p>住所：東京都千代田区</p>
        <form class="form-inline" name="form1">
          <div class="form-group">
            <label class="control-label" style="font-weight:normal;" for="businesshours">時間：</lab    el>
            <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
    
              <input type="text" id="businesshours" class="form-control input-small timepicker1">
              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div> ～ 
            <div class="input-group bootstrap-timepicker timepicker" style="width:110px">
              <input type="text" class="form-control input-small timepicker1">
              <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
            <div class="checkbox" style="position:relative;left:45px;display:block;margin-bottom: 0p    x;margin-top: 0px;">
              <label><input id="Checkbox1" value="" type="checkbox">終了時刻</label>
            </div>
            <a class="btn btn-primary" href="#">戻る</a>
          </div>
        </form>
      </div>
      <script type="text/javascript">
        $(function() {
         $('.timepicker1').timepicker({
    
          showMeridian: false,
          minuteStep: 1,
          defaultTime: "9:00"
        });
    
         $('#Checkbox1').click(function() {
          if ($(this).prop('checked') == true) {
            $('.timepicker1').timepicker(
              'setTime','22:00'
            );
          }else{
            $('.timepicker1').timepicker(
       'setTime','21:00'
            );
          }
        });
       });
    
     </script>
    </body>
[/code]


CC BY-SA 3.0
2016-12-08T01:09:55.477
30998
2016-12-08T01:09:55.477
13152
30992
answer