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

时间：2017-11-13 14:32:04

标签： javascript jquery twitter-bootstrap radio-button disabled-input

我有一个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建议如何操作。

3 个答案:

答案 0 :(得分：0)

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

＆＃13;
＆＃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;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

答案 2 :(得分：0)

你应该添加一个点击功能取决于你的库 让我们从一个你不使用任何图书馆的地方

你应该这样做:(你可以复制过去，它会起作用）

<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>
相关问题
最新问题