使用單選按鈕時使按鈕可單擊

Question

所以我有以下觀點：

<ion-view view-title="Training Detail">
    <ion-content class="padding">


            <ul class="list">

                <ion-item class="item item-checkbox item-button-right" ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise" on>
                    <label class="checkbox">
                        <input type="checkbox"  ng-click="didExercise(exercise.exerciseID)" >
                    </label>
                    <p><h2>{{exercise.exerciseName}}</h2></p>
                    <p>{{exercise.repetition}} <b ng-if="exercise.diaryRepetition.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryRepetition}}</i></b></p>
                    <p>{{exercise.weight}} <b ng-if="exercise.diaryWeight.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryWeight}}</i></b></p>
                  <button class="button button-positive" onclick="alert('fuuu')">
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                </ion-item>

            </ul>

        <button class="button button-full button-positive" id="finisherButton" disabled="true" >
          {{getButtonString()}}
        </button>

    </ion-content>
</ion-view>

哪個很棒。 我有一個單選按鈕，無論我在該行中單擊什么位置，單選按鈕都會選擇/取消選擇。

但是我想給用戶改變體重和重復的可能性。 我想在右側添加一個按鈕，用戶可以在其中單擊並更改內容。 但是，該按鈕不可單擊。 即使單擊按鈕，單選按鈕也會選擇/取消選擇，而不是執行“按鈕操作”。

我怎樣才能使這一行像單選按鈕一樣在按鈕之前“停止”呢？ 按鈕是可點擊的嗎？

感謝幫助！

Answer 1

您需要停止從父級點擊傳播。 像這樣放你的按鈕

<button class="button button-positive" ng-click="alert('fuuu'); $event.stopPropagation();">
   <i class="icon ion-ios-telephone"></i>
</button>

Answer 2

您可以嘗試：

    <ion-view view-title="Training Detail">
    <ion-content class="padding">


            <ul class="list">

                <ion-item class="item item-checkbox item-button-right" ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise" on>
                    <label class="checkbox">
                        <input type="checkbox"  ng-click="didExercise(exercise.exerciseID)" >
                    </label>
                    <p><h2>{{exercise.exerciseName}}</h2></p>
                    <p>{{exercise.repetition}} <b ng-if="exercise.diaryRepetition.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryRepetition}}</i></b></p>
                    <p>{{exercise.weight}} <b ng-if="exercise.diaryWeight.length > 0"><i> Eintrag im Trainingstagebuch: {{exercise.diaryWeight}}</i></b></p>
                  <button class="button button-positive clickme" alt="red"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="red" name="hello"/>

                        <button class="button button-positive clickme" alt="green"> click me
                    <i class="icon ion-ios-telephone"></i>
                  </button>
                        <input type='radio' id ="green" name="hello"/>

                        </ion-item>

            </ul>

        <button class="button button-full button-positive" id="finisherButton" disabled="true" >
                 </button>

    </ion-content>
</ion-view>

2：您的Java腳本代碼將類似於我正在使用jquery，請確認鏈接： https : //jsfiddle.net/gynz82tg/1/ 。 可能會對您有幫助。

  $(document).ready(function(){
  $('.clickme').click(function(){
       var attr = $(this).attr('alt');

       $('#'+attr).click();
  });

 })