Fatal编程技术网
  • javascript/
  • Javascript 基于单选按钮单击禁用/启用引导模式表单中的文本框

Javascript 基于单选按钮单击禁用/启用引导模式表单中的文本框

javascript jquery twitter-bootstrap

Javascript 基于单选按钮单击禁用/启用引导模式表单中的文本框,javascript,jquery,twitter-bootstrap,radio-button,disabled-input,Javascript,Jquery,Twitter Bootstrap,Radio Button,Disabled Input,我有一个bootsrap模式表单。如果我单击单选按钮“所有主题”，则“主题”文本框应处于禁用状态。同样，如果我单击单选按钮“特定主题”，则“主题”文本框应处于启用状态 添加主控 &时代； 添加主控 学科： 所有科目 特定主题 主题 姓名： 提交 接近 对于您需要对单选按钮使用事件处理的内容，您可以在下面的代码片段中进行尝试。我已经在jQuery中写过，您也可以使用JavaScript实现同样的功能 $（'input[type=radio]'）。单击（function（）{ if（$（thi

我有一个bootsrap模式表单。如果我单击单选按钮“所有主题”，则“主题”文本框应处于禁用状态。同样，如果我单击单选按钮“特定主题”，则“主题”文本框应处于启用状态


添加主控
&时代；
添加主控
学科：
所有科目
特定主题
主题
姓名：
提交
接近
对于您需要对单选按钮使用事件处理的内容，您可以在下面的代码片段中进行尝试。我已经在jQuery中写过，您也可以使用JavaScript实现同样的功能

$（'input[type=radio]'）。单击（function（）{
if（$（this.prop（“id”）=“forAllSubjects”）{
$（“#subNo”）.prop（“禁用”、“删除”）；
}否则{
$（“subNo”）.removeAttr（“禁用”）；
}
});


添加主控
&时代；
添加主控
学科：
所有科目
特定主题
主题名称：
提交
接近

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



您应该根据您的库添加单击功能
让我们从一个你不使用任何库的点开始

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



添加主控
&时代；
添加主控
学科：
所有科目
特定主题
主题
姓名：
提交
接近
函数（me）{
//特定航班
//所有科目
if（me==“forAllSubjects”&&document.getElementById（“subNo”）.classList.contains（'disabled'）==false）{
document.getElementById（“subNo”）.setAttribute（“禁用”、“禁用”）；
}否则{
document.getElementById（“subNo”）.removeAttribute（“禁用”、“禁用”）；
}
}

您尝试过哪些javascript？请用一些代码编辑您的问题，以便我们可以看到您的尝试。如果您无法做到这一点，请指向讨论您的问题的网页，以及您遇到问题的地方。@Phil It’s working.。谢谢您的帮助

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

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



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