基于单选按钮单击以引导模式形式禁用/启用文本框答案

【问题标题】：Disable/Enable a textbox in bootstrap modal form based on radio button click基于单选按钮单击以引导模式形式禁用/启用文本框
【发布时间】：2018-04-26 06:39:57
【问题描述】：

我有一个引导模式表单。如果我点击单选按钮，'对于所有主题'，'主题'文本框应该处于禁用状态。同样，如果我点击单选按钮'特定主题'，'应启用主题文本框。

<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 进行操作。

【问题讨论】：

你试过什么javascript？请使用一些代码编辑您的问题，以便我们可以看到您的尝试。如果您无法做到这一点，请指向讨论您遇到的问题以及您遇到问题的网页。
@Phil 它的工作..感谢您的帮助

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

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

为此，您需要对单选按钮使用事件处理，您可以在下面尝试 sn-p。我在 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>

【讨论】：

【解决方案3】：

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

【讨论】：