2016-10-23 21 views
0

「パスワードを入力」を非表示にしてから、私がラジオをクリックしたときに表示します。しかし、この行動のための私のコードは動作しません。私は最初にテキストを隠すために頭の中にjavascriptを書いてからテキストを表示します。しかし、私のコードは動作しません。コードを修正するにはどうしたらいいですか?どうもありがとうございます!モーダルフェード内の要素を隠す方法

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#pwd").hide(); 
     $("#inlineRadio2").click(function(){ 
      $("#pwd").show(500); 
     }); 
    }); 

    </script> 
</head> 

<body> 
<div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

<!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <form id="form_room" method="post" action="/create-room"> 
      <div class="form-group"> 
       <label for="room_name">Name</label> 
       <input type="text" id="room_name" name="room_name" placeholder="Room Name" /> 
      </div> 
      <fieldset class="form-group"> 
       <label class="form-check-inline"> 
        <input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public 
       </label> 

       <label class="form-check-inline"> 
        <input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private 
       </label> 

       <label class="form-check-inline"> 
        <p id="pwd">Enter password</p> 
        <input class="form-check-input" type="text" name="text" id="pwd" value="private"> 
       </label> 

      </fieldset> 

     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div> 
</div> 

+0

私はあなたが私には丁度から起きていないものを知ってみましょう、と言っているとして、それが動作して、テストこのコードを持っていますあなたは欲しいですか? – Jigar7521

+0

@ Jigar7521こんにちはJigar7521、私は間違いを犯して申し訳ありません。私が最初に投稿したコードは、新しいコードは動作しません。 –

答えて

0
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#pwd").hide(); 
     $("#inlineRadio2").click(function(){ 
      $("#pwd").show(500); 
     }); 
    }); 

    </script> 
</head> 

<body> 
<div class="container"> 
<h2>Modal Example</h2> 
<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

<!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 

     <div class="modal-body"> 
     <form id="form_room" method="post" action="/create-room"> 
      <div class="form-group"> 
       <label for="room_name">Name</label> 
       <input type="text" id="room_name" name="room_name" placeholder="Room Name" /> 
      </div> 
      <fieldset class="form-group"> 
       <label class="form-check-inline"> 
        <input class="form-check-input" type="radio" name="room_type" id="inlineRadio1" value="public"> Public 
       </label> 

       <label class="form-check-inline"> 
        <input class="form-check-input" type="radio" name="room_type" id="inlineRadio2" value="private"> Private 
       </label> 

       <label class="form-check-inline"> 
        <p id="pwd">Enter password</p> 
        <input class="form-check-input" type="text" name="text" id="pwd" value="private"> 
       </label> 

      </fieldset> 

     </div> 

     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

</div> 
</div> 

関連する問題