选择 <select> 选项时启用复选框答案

【问题标题】：Enable checkboxes when a <select> option is selected选择 <select> 选项时启用复选框
【发布时间】：2015-10-10 04:36:42
【问题描述】：

我正在创建一个“请求报价”页面。我对此很陌生，我想在从 select 区域选择选项时创建一个条件：

当您选择服务时，div 会删除类“.disabled”，复选框会删除属性“disabled”（不可点击）

我想做的是以下，选择“移动应用程序”选项后，会发生这种情况：

类 disabled 被删除

<div id="appoptions" class="disabled"></div>

属性disabled 也从复选框中删除：

<input type="checkbox "class="servico" disabled>

最后，两者都必须是这样的：

<div id="appoptions"></div>
<input type="checkbox "class="servico">

FIDDLE： https://jsfiddle.net/ujgx4st3/3/

任何帮助表示赞赏。

HTML

<select>
    <option selected="selected" id="service">Choose one of the options</option>
    <optgroup label=""></optgroup>

    <optgroup label="Full webpage">
        <option value="webpage">Create a new, custom website</option>
        <option value="reweb">Modernize our current website</option>
        <option value="trasnf">I don't know what I'm looking for</option>
    </optgroup>

    <optgroup label=""></optgroup>

    <optgroup label="Design Services">
        <option value="logo">Logo Design</option>
        <option value="branding">Branding</option>
        <option value="webdesign">Webpages design</option>
        <option value="mobile">Social Design <label class="hidden-xs">(Youtube, Facebook, Twitter, etc)</label></option>
        <option value="uxui">Mobile UX/UI</option>
    </optgroup>

    <optgroup label=""></optgroup>

    <optgroup label="Web Development">
        <option value="manage">Website Management</option>
        <option value="manage">Update to Responsive</option>
        <option value="coding">Page Coding</option>
        <option value="software">Software Programming</option>
        <option value="mobile">Mobile Application</option>
    </optgroup>

    <optgroup label=""></optgroup>

    <optgroup label="SEO & Social Media">
        <option value="smarket">Social Marketing <label class="hidden-xs">(Facebook, Twitter, Youtube, etc)</label></option>
        <option value="seo">Search Engine Optimization</option>
    </optgroup>

    <optgroup label=""></optgroup>

    <optgroup label="Website with CMS">
        <option value="wordpress">Wordpress</option>
        <option value="joomla">Joomla</option>
        <option value="drupal">Drupal</option>
        <option value="magento">Magento</option>
    </optgroup>

</select>


<div id="appoptions1" class="col-md-3 disabled">

    <div style="margin: 25px 0;">
        <label><b>Application options</b> <small>(mobile)</small></label></br></br>

        <input type="checkbox" name="platform" value="android" disabled class="servico">Android</br>
        <input type="checkbox" name="platform" value="apple" disabled class="servico">Apple</br>
        <input type="checkbox" name="platform" value="windows" disabled class="servico">Windows Phone</br>
        <input type="checkbox" name="platform" value="webapp" disabled class="servico">Web application</br>
    </div>
</div>

jQuery

function enable_cb() {
  var state = $('.check').attr('disabled');

    if ( $('select option:selected').attr() == 'mobile' ) {
        $('#addoptions').removeClass('disabled');
    } else {
        return false;
    }
};

【问题讨论】：

您能说明一下要求吗？你后来的要求和你的第一个要求有什么区别吗？还是只是一个具体的例子？
我想要做的是在我的 html 选择中选择“移动应用程序”选项，这样做之后，我的 div id“appoptions”，删除 class="disabled"，也是我的复选框 class="servico"，失去属性"disabled"
@uniqezor 请编辑您的问题并添加说明。这使其他用户更容易理解您的问题。
同意。 @uniqezor，很难说出你目前卡在哪里。
我更改了主题描述。很抱歉造成混乱

标签： javascript jquery html select checkbox

【解决方案1】：

我怀疑您的 Javascript 控制台出现错误，请尝试以下操作：

function enable_cb(element) {
  var state = $(element).attr('disabled');
  $(element).prop('disabled', !state);
}

如果您使用的是 jQuery 1.6+，请避免使用 prop()，因为它已被弃用，取而代之的是 attr()；

【讨论】：

我所做的是：function enable_cb() { var state = $('select option:selected').attr('disabled'); $(state).prop('禁用', !state); if (state == 'mobile') { $('#addoptions').removeClass('disabled'); } 其他{ 返回错误； };