Question

我有两个单选按钮。检查一个无线电时，需要将一个类添加到另一个无线电标签。如果未选中，请删除该课程。听起来很简单，但我似乎无法正常工作。我在这里有一个有关的例子Plunker Code

 <form name="backgroundPanelForm" novalidate="novalidate" role="form">
    <div class="col-xs-12">
        <div class="row radio-set background-radio-labels">
            <div class="radio">
                <input type="radio" data-ng-click="backgroundCtrl.switchPanel('uploadImage')" name="optionsRadios" id="optionsRadios1" data-ng-class="{uploadImageActive : backgroundCtrl.showPanel == 'uploadImage'}" value="uploadImage" data-ng-model="backgroundCtrl.uploadImage">
                <label class="choose-image" for="optionsRadios1">
                    <span></span>upload images
                </label>
            </div>
            <div class="radio">
                <input type="radio" data-ng-click="backgroundCtrl.switchPanel('chooseExisting')" name="optionsRadios" id="optionsRadios2" data-ng-class="{chooseExistingActive : backgroundCtrl.showPanel == 'chooseExisting'}" data-ng-change="backgroundCtrl.switchPanel('chooseExisting');" value="chooseExisting" data-ng-model="backgroundCtrl.chooseExisting">
                <label class="choose-existing" for="optionsRadios2">
                    <span></span>choose existing
                </label>
            </div>
        </div>
        <div data-ng-switch="backgroundCtrl.showPanel">
            <div data-ng-switch-when="uploadImage" class="app-branding-animate">
                <div data-ng-include="'components/appGateway/branding/panels/background-upload-image.html'"></div>
            </div>
            <div data-ng-switch-when="chooseExisting" class="app-branding-animate">
                <div data-ng-include="'components/appGateway/branding/panels/background-choose-existing.html'"></div>
            </div>
        </div>
    </div>
</form>

Javascript是：

jQuery("input#optionsRadios1:radio").click(function() {
            if (this.checked) {
                $('label.choose-existing').addClass('radio-disabled');
            } else if (!this.checked){
                $('label.choose-existing').removeClass('radio-disabled');
            }
        });


        jQuery("input#optionsRadios2:radio").click(function() {
            if (this.checked) {
                $('label.choose-image').addClass('radio-disabled');
            } else if (!this.checked){
                $('label.choose-image').removeClass('radio-disabled');
            }

        });



CSS:
.radio-disabled {
  color: #d3d3d3;
   }

Answer 1

您已在页眉中添加了脚本文件，因此您需要将脚本置于dom ready处理程序中，否则在执行脚本时，无线电元素不会添加到dom中，因此点击处理程序将无法注册

jQuery(function($){
    $("#optionsRadios1:radio").click(function () {
        $('label.choose-existing').toggleClass('radio-disabled', this.checked);
    });

    $("#optionsRadios2:radio").click(function () {
        $('label.choose-image').addClass('radio-disabled', this.checked);
    });
})

演示：Fiddle

另请注意，由于bootstrap需要jQuery，因此需要在boostrap之前包含jQuery

  <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

简化版

jQuery(function($){
    var $radios = $('input[name="optionsRadios"]').click(function () {
        $(this).next().removeClass('radio-disabled');
        $radios.not(this).next().addClass('radio-disabled');
    });
})

演示：Fiddle

Answer 2

这是您所需要的（也请注意代码差异）：

 $(document).ready(function(){

    jQuery("input[name = 'optionsRadios']").click(function() {
            if ($(this).val() === "uploadImage") {
                $('label.choose-existing').addClass('radio-disabled');
                $('label.choose-image').removeClass('radio-disabled');
            } else {
                $('label.choose-existing').removeClass('radio-disabled');
        $('label.choose-image').addClass('radio-disabled');
            }
        });

});

Answer 3

if($('#optionsRadios1').is(':checked')) { 
     $('label.choose-image').addClass('radio-disabled');
}
 else if($('#optionsRadios2').is(':checked')) { 
     $('label.choose-image').addClass('radio-disabled');
}
else {
       // do something
}

Answer 4

$(document).ready(function(){
   $( "input:radio[name=optionsRadios]" ).on( "click", function() {
     $('label.choose-image,label.choose-existing').removeClass('radio-disabled');
    if ($(this).val().toLowerCase() === "uploadimage") {
       $('label.choose-existing').addClass('radio-disabled');
     } else {
             $('label.choose-image').addClass('radio-disabled');
     }
   });
});

使用jQuery根据选中的单选按钮添加/删除类

4 个答案: