Отключить / включить текстовое поле в модальной форме начальной загрузки, основанное на щелчке переключателя

У меня есть модальная форма начальной загрузки. В этом случае, если я нажимаю на переключатель, текстовое поле "Для всех субъектов" должно быть в отключенном состоянии. Аналогично, если я нажимаю переключатель "Текст для конкретного субъекта", поле "Тема" должен быть включен.

<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> </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 "> 
         
         <div class="form-group">
          <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 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>

Пожалуйста, предложите, как это сделать из JavaScript.

3 ответа

Вы должны добавить функцию щелчка зависит от вашей библиотеки позволяет получить из точки, вы не используете любую библиотеку

Вы должны сделать это: (вы можете скопировать прошлое, и это будет работать)

<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>

Используя JavaScript, вы можете сделать это. Дать onclick="disableSubjectField()" к переключателям:

<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>

Затем напишите этот JavaScript, чтобы отключить поле ввода Тема.

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

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

Для этого вам нужно использовать обработку событий для переключателей, для этого вы можете попробовать фрагмент ниже. Я написал, что в jQuery вы также можете использовать JavaScript для того же.

$('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> 
</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 "> 
            <div class="form-group">
             <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>

Другие вопросы по тегам