Question

我有一个bootsrap模式形式。如果我点击单选按钮，'For All Subjects'，'Subject'文本框应该处于禁用状态。同样，如果我点击单选按钮'Specific Subject'，'应启用主题'文本框。

<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建议如何操作。

Answer 1

为此您需要对单选按钮使用事件处理，您可以尝试下面的代码段。我在jQuery中写过，你也可以使用JavaScript。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用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;
    }
}

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

根据单选按钮单击禁用/启用bootstrap模式窗体中的文本框

3 个答案: