Question

我有下面的代码片段，并且使用它来显示div并在更改时禁用某些输入值。共有3个选项：批准，请求，更改。我认为代码中的错误与第三组表单选项有关。如何禁用未激活的功能？我的脚本怎么了？

var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
  if (jQuery(this).val() == 'approval') {
    jQuery('.approval').show();
    jQuery('#requesttype').prop('disabled', true);
    jQuery('#requestpurpose').prop('disabled', true);
    jQuery('#busformdoc4').prop('disabled', true);
    jQuery('#busformdoc3').prop('disabled', true);
    jQuery('#requestsendit').prop('disabled', true);
  } else jQuery('.approval').hide();
  if (jQuery(this).val() == 'request') {
    jQuery('.request').show();
    jQuery('#approvaltype').prop('disabled', true);
    jQuery('#where').prop('disabled', true);
    jQuery('#busformdoc1').prop('disabled', true);
    jQuery('#busformdoc2').prop('disabled', true);
    jQuery('#approvalsendit').prop('disabled', true);
  } else jQuery('.request').hide();
  if (jQuery(this).val() == 'change') {
    jQuery('.change').show();
    jQuery('#changes').prop('disabled', true);
    jQuery('#busformdoc5').prop('disabled', true);
    jQuery('#busformdoc6').prop('disabled', true);
    jQuery('#changesendit').prop('disabled', true);
  } else jQuery('.change').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select name="privileges" id="privileges" class="">
    <option disabled selected>– Select what you are requesting –</option>
    <option id="approval" value="approval">Advertising Approval</option>
    <option id="request" value="request">Artwork Design Request</option>
    <option id="change" value="change">Artwork Change Request</option>
  </select>
</div>
<div class="approval" style=" display: none;">
  <select name="type" id="approvaltype" required>
    <option disabled selected>– Type –</option>
    <option value="1">1</option>
  </select>
  <textarea name="where" id="where" title="Purpose" required></textarea>
  <input type="file" name="busformdoc1" id="busformdoc1">
  <input type="file" name="busformdoc2" id="busformdoc2">
  <input name="sendit" id="approvalsendit" type="submit" value="Send Approval Request" />
</div>
<div class="request" style=" display: none;">
  <select name="type" id="requesttype" required>
    <option disabled selected>– Type –</option>
    <option value="1">1</option>
  </select>
  <textarea name="purpose" id="requestpurpose" title="purpose" required></textarea>
  <input type="file" name="busformdoc3" id="busformdoc3" >
  <input type="file" name="busformdoc4" id="busformdoc4" >
  <input name="sendit" id="requestsendit" type="submit" value="Send Artwork Request"  />
</div>
<div class="change" style=" display: none;">
  <textarea name="changes" id="changes" title="Changes" required></textarea>
  <input type="file" name="busformdoc5" id="busformdoc5" >
  <input type="file" name="busformdoc6" id="busformdoc6" >
  <input name="sendit" type="submit" value="Send Change Request" class="btn" />
</div>

Answer 1

为什么像这样使用jquery，您错过了所有要点，jquery是用于操纵HTML的工具，但是现在您的代码正在操纵您，清理冗余并重试

Answer 2

希望这会有所帮助。选择类别时，应启用其元素，而其他类别元素应被禁用（您错过了）。

function toggleDisable(ids)
{
  //console.log(ids)
    var elems = ['requesttype','requestpurpose','busformdoc4','busformdoc3','requestsendit','approvaltype','where','busformdoc1','busformdoc2','approvalsendit','changes','busformdoc5','busformdoc6','changesendit'];
    elems.forEach(function(id){
        jQuery("#"+id).prop("disabled",ids.indexOf(id)<0)
        //console.log(jQuery("#"+id).prop("disabled"))
    })
}
var Privileges = jQuery('#privileges');
var select = this.value;
Privileges.change(function() {
  if (jQuery(this).val() == 'approval') {
    jQuery('.approval').show();
    toggleDisable(['approvaltype','where','busformdoc1','busformdoc2','approvalsendit']);
  } else jQuery('.approval').hide();
  
  if (jQuery(this).val() == 'request') {
    jQuery('.request').show();
    toggleDisable(['requesttype','requestpurpose','busformdoc4','busformdoc3','requestsendit']);
  } else jQuery('.request').hide();
  
  if (jQuery(this).val() == 'change') {
    jQuery('.change').show();  toggleDisable(['changes','busformdoc5','busformdoc6','changesendit']);
  } else jQuery('.change').hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select name="privileges" id="privileges" class="">
    <option disabled selected>– Select what you are requesting –</option>
    <option id="approval" value="approval">Advertising Approval</option>
    <option id="request" value="request">Artwork Design Request</option>
    <option id="change" value="change">Artwork Change Request</option>
  </select>
</div>
<div class="approval" style=" display: none;">
  <select name="type" id="approvaltype" required>
    <option disabled selected>– Type –</option>
    <option value="1">1</option>
  </select>
  <textarea name="where" id="where" title="Purpose" required></textarea>
  <input type="file" name="busformdoc1" id="busformdoc1">
  <input type="file" name="busformdoc2" id="busformdoc2">
  <input name="sendit" id="approvalsendit" type="submit" value="Send Approval Request" />
</div>
<div class="request" style=" display: none;">
  <select name="type" id="requesttype" required>
    <option disabled selected>– Type –</option>
    <option value="1">1</option>
  </select>
  <textarea name="purpose" id="requestpurpose" title="purpose" required></textarea>
  <input type="file" name="busformdoc3" id="busformdoc3" >
  <input type="file" name="busformdoc4" id="busformdoc4" >
  <input name="sendit" id="requestsendit" type="submit" value="Send Artwork Request"  />
</div>
<div class="change" style=" display: none;">
  <textarea name="changes" id="changes" title="Changes" required></textarea>
  <input type="file" name="busformdoc5" id="busformdoc5" >
  <input type="file" name="busformdoc6" id="busformdoc6" >
  <input name="sendit" type="submit" value="Send Change Request" class="btn" id="changesendit" />
</div>

显示/隐藏/禁用表单输入和div

2 个答案: