Сделать кнопку кликабельным при помощи кнопки радио

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 код сценария будет, как like.I я использую JQuery пожалуйста, проверьте ссылку: https://jsfiddle.net/gynz82tg/1/. Может быть, это поможет вам.

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

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

})