Deaktivieren/ein Textfeld in Bootstrap-modale Formular auf Optionsfeld basierend aktivieren klicken

Question

Ich habe einen bootsrap modal form.In dass, wenn ich auf das Optionsfeld klicken, ‚für alle Fächer‘, ‚Betreff‘ Textbox in deaktivierten Zustand sein sollte. Wenn ich auf das Optionsfeld "Spezifisches Thema" klicke, sollte das Textfeld "Betreff" aktiviert sein.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" id="adminContent"> 
 
    \t \t <div class="row"> 
 
    \t \t \t <div class="col s12 m12 l12" style="float: right"> 
 
    \t \t \t \t <button type="button" class="btn btn-lg" 
 
    \t \t \t \t \t data-toggle="modal" data-target="#addMasterData" >Add Master</button> 
 
    \t \t \t </div> 
 
    \t \t </div> \t </div> 
 
    \t 
 
    \t <div class="modal fade vertical-align-center" id="addMasterData" 
 
    \t \t role="dialog" style="width: 500px"; role="dialog" 
 
    \t \t data-backdrop="static" data-keyboard="false"> 
 
    
 
    \t \t <div class="modal-dialog "> 
 
    \t \t \t <div class="modal-content "> 
 
    \t \t \t \t <div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
 
    \t \t \t <h4 class="modal-title"> 
 
    \t \t \t \t \t \t <b><font class="font">Add Master</font></b> 
 
    \t \t \t \t \t </h4> 
 
    \t \t \t \t \t 
 
    \t \t \t \t </div> 
 
    \t \t \t \t <form id="mastercreate" action="addConfig" method="post"> 
 
    
 
    \t \t \t \t \t <div class="modal-content "> 
 
    
 
    \t \t \t \t \t \t <div class="modal-body "> \t 
 
    \t \t \t \t \t 
 
    \t \t \t \t \t <div class="form-group"> 
 
    \t \t \t \t \t \t <label for="text">Subjects:</label> <label class="radio-inline"> 
 
    \t \t \t \t \t \t \t <input type="radio" name="roleSubjectRadio" id="forAllSubjects" 
 
    \t \t \t \t \t \t \t value="Yes" >For All Subjects 
 
    \t \t \t \t \t \t </label> <label class="radio-inline"> <input type="radio" 
 
    \t \t \t \t \t \t \t name="roleSubjectRadio" id="specificFlights" 
 
    \t \t \t \t \t value="Specific" checked>Specific Subject 
 
    \t \t \t \t \t \t </label> <input type="hidden" class="form-control" id="specs" name="specs" 
 
    \t \t \t \t \t \t \t value=""> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t \t <div class="form-group" id="subName"> 
 
    \t \t \t \t \t \t \t \t <label for="createorigin" class="form-control-label"><font >Subject 
 
    \t \t \t \t \t \t \t \t \t Name:</font></label> <input type="text" class="form-control" id="subNo" 
 
    \t \t \t \t \t \t \t \t \t name="subNo" > 
 
    \t \t \t \t \t \t \t </div> 
 
    \t \t \t \t \t \t <div class="modal-footer"> 
 
    \t \t \t \t \t \t <button type="button" class="btn btn-primary" 
 
    \t \t \t \t \t \t \t onclick="addMaster()">Submit</button> 
 
    \t \t \t \t \t \t <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
    \t \t \t \t \t \t 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t \t </div> 
 
    \t \t \t \t </form> 
 
    \t \t \t </div> 
 
    
 
    \t \t </div> 
 
    \t </div>

Bitte vorschlagen, wie es von Javascript zu tun.

Answer 1

Dafür müssen Sie Ereignis verwenden Handhabung für Radio-Buttons, können Sie unter Code-Schnipsel versuchen, dass für. Ich habe geschrieben, dass Sie in jQuery auch JavaScript für dasselbe verwenden können.

$('input[type=radio]').click(function(){ 
 
    if($(this).prop("id")==="forAllSubjects"){ 
 
    $("#subNo").prop("disabled","remove"); 
 
    } else { 
 
    $("#subNo").removeAttr("disabled"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container" id="adminContent"> 
 
    <div class="row"> 
 
    <div class="col s12 m12 l12" style="float: right"> 
 
     <button type="button" class="btn btn-lg" data-toggle="modal" data-target="#addMasterData" >Add Master</button> 
 
    </div> 
 
    </div> \t 
 
</div> 
 
      
 
<div class="modal fade vertical-align-center" id="addMasterData" role="dialog" style="width: 500px"; role="dialog" data-backdrop="static" data-keyboard="false"> 
 
    <div class="modal-dialog "> 
 
    <div class="modal-content "> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
      <span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title"> 
 
      <b><font class="font">Add Master</font></b> 
 
     </h4> 
 
     </div> 
 
     <form id="mastercreate" action="addConfig" method="post"> 
 
     <div class="modal-content "> 
 
      <div class="modal-body "> \t 
 
      <div class="form-group"> 
 
      \t <label for="text">Subjects:</label> <label class="radio-inline"> 
 
       <input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" >For All Subjects 
 
       </label> 
 
       <label class="radio-inline"> 
 
       <input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" checked>Specific Subject 
 
       </label> 
 
       <input type="hidden" class="form-control" id="specs" name="specs" value=""> 
 
      </div> 
 
      <div class="form-group" id="subName"> 
 
       <label for="createorigin" class="form-control-label"> 
 
       <font >Subject Name:</font> 
 
       </label> 
 
       <input type="text" class="form-control" id="subNo" name="subNo" > 
 
      </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      <button type="button" class="btn btn-primary" onclick="addMaster()">Submit</button> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

mit JavaScript Sie dies tun können. Geben Sie onclick="disableSubjectField()" zu den Radiobuttons:

<div class="form-group"> 
    <label for="text">Subjects:</label> <label class="radio-inline"> 
    <input type="radio" name="roleSubjectRadio" id="forAllSubjects" value="Yes" onclick="disableSubjectField()" >For All Subjects 
    </label> <label class="radio-inline"> 
    <input type="radio" name="roleSubjectRadio" id="specificFlights" value="Specific" onclick="disableSubjectField()" checked>Specific Subject 
    </label> <input type="hidden" class="form-control" id="specs" name="specs" value=""> 
</div> 

Dann diesen Javascript schreiben das Betreff-Eingabefeld zu deaktivieren.

function disableSubjectField() { 
    if(document.getElementById('forAllSubjects').checked) { 
     document.getElementById('subNo').disabled = true; 

    }else if(document.getElementById('specificFlights').checked) { 
     document.getElementById('subNo').disabled = false; 
    } 
} 

Answer 3

sollten Sie eine Klick-Funktion hinzufügen, hängt von Ihrer Bibliothek lässt sich von einem Punkt erhalten Sie verwenden `t jede Bibliothek

Sie sollten dies tun: (Sie können vorbei kopieren und es wird funktionieren)

<head> 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
</head> 
<div class="container" id="adminContent"> 
     <div class="row"> 
      <div class="col s12 m12 l12" style="float: right"> 
       <button type="button" class="btn btn-lg" 
        data-toggle="modal" data-target="#addMasterData" >Add Master</button> 
      </div> 
     </div> </div> 

    <div id="addMasterData" 
     role="dialog" style="width: 500px"; role="dialog" 
     data-backdrop="static" data-keyboard="false"> 

     <div class="modal-dialog "> 

      <div class="modal-content "> 
       <div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
      <h4 class="modal-title"> 
         <b><font class="font">Add Master</font></b> 
        </h4> 

       </div> 
       <form id="mastercreate" action="addConfig" method="post"> 

        <div class="modal-content "> 

         <div class="modal-body "> 

        <div class="form-group"> 
         <label for="text">Subjects:</label> <label class="radio-inline"> 
          <input type="radio" name="roleSubjectRadio" id="forAllSubjects" 
          value="true" onclick="radioClicked(this.id)" >For All Subjects 
         </label> 
         <label class="radio-inline"> 
         <input type="radio" 
          name="roleSubjectRadio" id="specificFlights" 
        value="Specific" onclick="radioClicked(this.id)" checked> 
        Specific Subject 
         </label> <input type="hidden" class="form-control" id="specs" name="specs" 
          value=""> 
        </div> 
        <div class="form-group" id="subName"> 
           <label for="createorigin" class="form-control-label"><font >Subject 
            Name:</font></label> <input type="text" class="form-control" id="subNo" 
            name="subNo" > 
          </div> 
         <div class="modal-footer"> 
         <button type="button" class="btn btn-primary" 
          onclick="addMaster()">Submit</button> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 

        </div> 
        </div> 
       </form> 
      </div> 

     </div> 
    </div> 


    <script> 
     function radioClicked (me){ 
     //specificFlights 
     //forAllSubjects 

      if(me === "forAllSubjects" && document.getElementById("subNo").classList.contains('disabled') === false){ 
       document.getElementById("subNo").setAttribute("disabled",'disabled'); 
      }else{ 
       document.getElementById("subNo").removeAttribute("disabled",'disabled'); 
      } 
     } 

    </script>