禁用其他未选择的div输入字段

时间:2019-04-27 15:10:47

标签: jquery

我正在尝试禁用其他未选中的div的所有输入字段。

我可以使用以下代码禁用输入字段,但可以使用选定的ID。

我不想包含 这样,除了选定的div以外的所有输入字段都将被禁用,以便在提交表单时不会发送这些数据

它被选中时会禁用id buyadsellad的所有字段,但我想做相反的事情。

    $("#buyadsellad :input").prop("disabled", true);

这是完整的代码

<form action="" method="post" id="addsite" name="addsite">

  <div class="form-group">
    <select class="form-control form-control-sm" name="sitename">
      <option>Choose Site</option>

      <option value="buyadsellad">buyadsellad</option>
      <option value="ddfdffhtrtttgt5trf">ddfdffhtrtttgt5trf</option>
    </select>
  </div>

  <div class="buyadsellad box" id="buyadsellad" style="display: none;"><input type="text" title="" value="667667" name="nottitle" class="txt">
  </div>
 
  <div class="ddfdffhtrtttgt5trf box" id="ddfdffhtrtttgt5trf" style="display: block;"><input type="text" title="" value="9999999" name="nottitle" class="txt"></div>

  </div> <input type="submit" value="submit" name="submit" class="txt2">
</form>

当从选项下拉列表中选择buyadsellad选项时,下面是清晰的图片,然后显示buyadsellad div,我想在所有不是buyadsellad的输入字段中添加禁用字段 。在这种情况下,我想禁用此div ddfdffhtrtttgtgt5trf中的输入字段

我不想给出具体的名称,因为我不知道这种形式的div可能没有。在这种情况下,它只有两个div,但可能是20。所以我想禁用buyadsellad div以外的所有输入字段

1 个答案:

答案 0 :(得分:0)

下面的代码是您所期望的工作版本。默认情况下,所有输入将被隐藏。更改选择框后,它将相应地显示输入。

$(document).ready(function(){
    $('#selectbox').change(function(){
        var elementid = $('#selectbox').val();
    	$('.box').hide(); 
    	$("input.form-control").prop("disabled", true);
        $("."+elementid).show().find("input").prop("disabled", false)
        
    });

})	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="" method="post" id="addsite" name="addsite" style="width: 500px; margin: 50px auto;">
		<div class="form-group">
			<select class="form-control form-control-sm" id="selectbox" name="sitename">
				<option>Choose Site</option>

				<option value="buyadsellad">buyadsellad</option>
				<option value="ddfdffhtrtttgt5trf">ddfdffhtrtttgt5trf</option>
			</select>
		</div>
		<div class="buyadsellad box form-group" id="buyadsellad" style="display: none;"> 
			buyadsellad : <input type="text" title="" value="667667" name="nottitle" class="txt form-control">
		</div>
		<div class="ddfdffhtrtttgt5trf box form-group" id="ddfdffhtrtttgt5trf" style="display: none;">
			ddfdffhtrtttgt5trf: <input type="text" title="" value="9999999" name="nottitle" class="txt form-control">
		</div>
		<div class="form-group">
			<input type="submit" value="submit" name="submit" class="txt2">
		</div>
	</form>